传统的布局方式,是基于盒模型,依赖position,float,display等属性。CSS3的伸缩盒子特性,使得布局更加灵活,适应性更强。
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间。
一、父容器的一些属性:
1. display:flex:设置父容器为伸缩盒子,那么这个盒子里面的所有直接子元素都会自动的变成伸缩项;
2. justify-content:设置子元素在主轴方向上的排列方式
- flex-start:让子元素从父容器的起始位置开始排列
- flex-end:让子元素从父容器的结束位置开始排列
- center:让子元素从父容器的中间位置开始排列
- space-between:左右对齐父容器的开始和结束,中间平均分页,产生相同的间距
- space-around:将多余的空间平均的分页在每一个子元素的两边,这样将导致中间盒子的间距是左右两边盒子间距的两倍
3. align-items:设置子元素(伸缩项)在侧轴方向上的对齐方式
- flex-start:设置在侧轴方向上顶对齐
- flex:end:设置在侧轴方向上底对齐
- center:设置在侧轴方向上居中对齐
- stretch:拉伸,让子元素在侧轴方向上进行拉伸,填充满整个侧轴方向>> 默认值
- baseline:文本基线
4. flex-flow:是flex-direction和flex-wrap的综合,eg. flex-flow: row wrap;
1)flex-wrap:控制子元素是否换行显示,默认不换行,
- nowrap:不换行(默认)--则收缩
- wrap:换行
- wrap-reverse:翻转,原来是从上到下,翻转后就是从下到上来排列
2)flex-direction:定义伸缩子元素在伸缩容器中放置的方向,默认是row(水平方向)
- row:水平排列方向,从左到右
- row-reverse:水平排列方向,从右到左
- column:垂直排列方向,从上到下
- column-reverse:垂直排列方向,从下到上
二、子元素的一些属性
1. flex-grow:可以来扩展子元素的宽度,设置当前元素应该占据剩余空间的比例值,默认是0,说明子元素并不会去占据剩余的空间
比例值计算:当前空间的flex-grow/所有兄弟元素的flex-grow的和
说明:把各项目的flex-grow值加起来等于4,就是把额外空间分成4份,比例为1的占1份,比例为2的占2份。
2. flex-shrink:定义收缩比例,通过设置的值来计算收缩空间,默认值为1
比例值计算(计算方式和flex-grow一样):当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
3. flex-basis: 定义伸缩项基本值
4. flex:缩写flex:flex-grow flex-shrink flex-basis, 默认 flex: 0 1 auto
案例:menu根据菜单项自动拓展宽度
——>
伸缩盒子案例:自适应布局