学习了一种移动端布局方法 flex布局 也叫弹性布局 为盒状模型提供最大的灵活性

采用flex布局的元素 称为flex容器 它的所有子元素自动成为容器成员 称为flex项目

原理:通过给父盒子添加flex属性来控制子盒子的位置和排列方式

注意事项:当为父盒子设置为flex布局后 子元素float clear vertical-align属性将失效

一.对于父项 有以下六个常见属性

其中提到的主轴是水平向右的x轴 侧轴是垂直向下的y轴

1.flex-directon默认是row(从左到右排列)

row-reverse 即为从右到左 column即为改变主轴为y轴 column-reverse同理

如图例为 主轴为y轴的情况

2.justify-content(需先确定主轴)

基本属性如下

flex-end准确来说不是”从尾部开始” 而是排列在尾部的意思

其中space-between和space-around最常用 例如space-between效果如下

3.flex-wrap是否换行(默认不换行nowrap 装不下会缩小盒子宽度!!!)

这是不换行盒子

这是换行盒子

可以看到父盒子大小没有变化 默认不换行情况下 要让子盒子排列在一行上就需要改变其大小 如果我们不想要这种效果则需要进行设置

4.align-content(只能设置多行情况!!! 必须已经设置flex-wrap:wrap)

具体属性与justify-content差不多

效果图如下

5.align-items(只应用于单行!!!)

6.flex-flow结合flex-direction和flex-wrap

二.对于子项也有几个常见属性

1.flex份数

2.align-self就是对子盒子属性排列再调整

3.order(越小越靠前 默认为0)

这就是flex布局的基础原理和关于其父项,子项的常见属性的大致情况

近些年flex布局已成为移动端布局的主流方式 在蓝桥杯中也频频考察 所以需要重点学习 后面我会再通过一些小项目和蓝桥杯真题进行巩固学习 未完待续……