flex布局

一，传统布局与flex布局

传统布局：

1.兼容性好

2.布局繁琐

3.局限性，不能在移动端进行很好的布局

flex 弹性布局

1.操作方便 布局简单 移动端应用十分广泛

2.PC端浏览器支持情况较差

3.低版本不支持

二，布局原理

flex意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

！---当父盒子设置为flex布局之后，子元素的float，clear属性将失效

display：flex

!-----伸缩布局=弹性布局=伸缩盒布局=flex布局

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

布局原理：

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

三，父项常见属性

常见父项属性

对父元素设置的属性：

 

flex-direction 设置主轴的方向

1.主轴和侧轴

又叫行和列

默认主轴方向就是x轴方向，水平向右

默认侧轴方向就是y轴方向，水平向下

 这个属性就是可以设置主轴的方向

 

我们的元素是根据主轴来排列的，剩下的一个轴就是侧轴

justify-content 设置主轴上的子元素排列方式

这个属性定义了项目在主轴上的对齐方式

注意：一定要确定好主轴是哪个

 对子元素的排列不开时的换行问题

在一行内的子元素排列不开时，会自动缩小各个子元素的宽度，使其能按排列方式正确摆放

flex-wrap 设置子元素是否换行

默认情况下，项目都是排在轴线上，flex-warp属性定义，flex布局中默认是不换行的

align-items 设置侧轴上的子元素排列方式（单行）
 在子项为单项时使用

 

和主轴排列方式搭配使用效果更佳

align-content 设置侧轴上子元素的排列方式

在换行情况下

flex-flow

这个属性是flex-dircetion和flex-wrap属性的复合属性

四.flex布局子项常见属性

flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

align-self 控制子项自己在侧轴上的排列方式

order属性定义项目的排列顺序

---------------------------------------------------end-------------------------------------------------------------------------