CSS3-FLEX布局详解

本文目录

1.什么是Flex布局
2.容器的常用属性
3.项目的一些属性
4.实战应用:两栏自适应

1.什么是Flex布局

flex布局表示弹性布局，为盒状模型提供最大的灵活性。
适用范围
任何一种元素都可以指定为flex布局

.wrap{
    display:flex;
}

使用时应该注意些什么？

如果是Webkit内核的浏览器，需要加上 -webkit- 前缀
在父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效，所以在使用flex布局时，不应该先设置完子元素布局后再使用。

父级元素采用flex布局，则父级元素为容器，全部子元素自动成为项目。
项目在容器中的显示次序：
容器中的主轴和交叉轴

在容器中默认有水平的主轴和垂直的交叉轴，项目在容器中默认沿主轴排列

2.容器的常用属性

有六个常用属性设置在容器上，分别为：

flex-direction
flex-wrap
flew-flow
justify-content
align-items
align-content

2.1.flex-direction 属性

flex-direction 属性设置容器主轴的方向
包含四个属性值：
row: 默认值，表示沿水平方向，由左到右。
row-reverse ：表示沿水平方向，由右到左
column：表示垂直方向，由上到下
column-reverse:表示垂直方向，由下到上

2.2.flex-wrap属性

包含三个属性值：
nowrap：表示不换行
wrap：正常换行，第一个位于第一行的第一个
wrap-reverse：向上换行，第一行位于下方

2.3.flex-flow属性

flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,

第一个属性值为flex-direction的属性值
第二个属性值为flex-wrap的属性值

2.4.justify-content 属性

justify-content属性用于设置项目在容器中的对齐方式。
该属性主要要五个属性值：
flex-start：默认值，左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐
space-around：每个项目两侧的间距相等

2.5.align-items 属性

align-items定义了项目在交叉轴上是如何对齐显示的
该属性主要有五个属性值：（以交叉轴从上向下为例）
flex-start:交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴居中对齐
baseline 项目的第一行文字的基线对齐
stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

3.项目的一些属性

3.1.order属性

order属性设置项目排序的位置，默认值为0，数值越小越靠前

3.2.flex-grow 属性

flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

3.3.flex-shrink 属性

flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

3.4.flex-basis属性

flex-basis属性表示表示项目占据主轴空间的值。默认为auto，表示项目当前默认的大小。如果设置为一个固定的值，则该项目在容器中占据固定的大小。

3.5.flex属性

flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为：0 1 auto；
当flex属性只有一个数值的时候：
让所有弹性盒模型对象的子元素都有相应比例的份额（如果都为1，则是都有相同的长度），且忽略它们内部的内容，示例：
一个父盒子div包括三个子盒子div
首先给父盒子 display:flex;width:1200px;
然后继续给父盒子 flex-direction 让子盒子水平水平row，垂直分布column
最后给子盒子赋予份数 flex:1 flex:2 flex:3
此时子盒子1宽度为200px，盒子2宽度为400px，盒子3宽度为600px

3.6.align-self 属性

align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式

.item{
    align-self: flex-start | flex-end | center | baseline | stretch 
}

4.实战应用:两栏自适应

需求：flex 布局，固定高度，左边定宽，右边自适应？
flex 布局给父元素设置 display:flex，左边的子元素给个固定的宽度width:100px，右边的子元素 flex:1 就可以实现需求了
当然了，也有另外一种方法，给左边的元素固定宽度后再让其向左浮动，同时添加上overflow:hidden属性，右边的元素也可以实现自动填充剩下的宽度，但是使用这个方法需要注意的一点是，所有的元素都需要添加上高度才行，而flex布局的一大好处就是根据布局方向，子元素的高度/宽度会自动填充满父元素。