flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,相似于float:left;布局
比float的好处是容器没有设置高度,会根据项目来自适应高度,咱们都知道,设置float属性,若是没有设置高度,那么容器会脱离文档流,须要清除浮动,才能够根据项目的高度规定高度。flex
父元素称之为容器,子元素称之为项目spa
水平的方向叫主轴, 水平和垂直交叉点,称之为交叉轴3d
效果blog
flex-direction 改属性决定了项目(即子元素)排列的方向文档
row(默认值)水平方向左以左边为起点排列io
row-reverse 水平方向以右边终点为起点排列容器
代码float
效果自适应
column 垂直方向,起点在左上角
代码
效果
column-reverse 垂直方向,起点在下边,相似于把子元素翻转了
代码
效果
flex-wrap:wrap 设置了该属性,若是子元素的宽度超出了父元素的宽度,则会换行
上面说了设置了dispay:flex,flex中若是子元素中的总宽度不超过父级,那么就正常排列(按照实际像素排列),
效果
那么我想让子元素的宽度即便超出了父元素的宽度,不须要按照百分比,则是按照子元素的实际宽度排列,咱们这里能够设置flex-wrap:wrap属性就能够
效果以下
能够看出设置了flex-wrap:wrap,子元素的宽度超出了父元素的宽度,就按照子元素的实际宽度排列,就会换行。