前端开发笔记--flex布局

flex布局:

个人觉得flex布局比起传统布局要优先得多(主要是容易使用),缺点是IE10及以上版本才能使用,甚至某些属性只有在IE11才能使用(而且我发现凡是不兼容主要IE的坑来的多,不是说其他浏览器没有)

不过微信小程序开发时完美适配。

回到主题:

                                        前端开发笔记--flex布局_第1张图片

使用flex布局的容器,内部元素自动成为flex项目(如上图items)display:flex;  IE10可用

提醒:flex项目中不能使用float,clear(设置左右两侧是否可以有浮动),vertical-align(垂直对齐方式)

 

1、容器的属性: 

(1)flex-direction排列方式:row(默认水平排列),row-reverse(水平逆序),column(垂直方向),column-reverse

                前端开发笔记--flex布局_第2张图片         前端开发笔记--flex布局_第3张图片IE10可用

(2)flex-wrap换行:nowrap(自动缩小不换行,默认),wrap(换行),wrap-reverse(逆序换行)

                  前端开发笔记--flex布局_第4张图片                    前端开发笔记--flex布局_第5张图片E11可用

(3)flex-flow:是上面(1)和(2)的集合,默认值为 flex-flow:nowrap row;IE10可用I

(4)justify-content水平对其方式:flex-start(左对齐),flex-end(右对齐),center(居中对齐),space-between(两端对齐),space-around(沿轴线均匀分布)

     IE10可用

         前端开发笔记--flex布局_第6张图片        前端开发笔记--flex布局_第7张图片           前端开发笔记--flex布局_第8张图片

(5)align-items(垂直对齐方式):flex-start(顶端对齐),flex-end(底部对齐),center(居中对齐),baseline(item中第一行文字对齐),stretch(当item未设置高度,item和容器等高对齐)

        前端开发笔记--flex布局_第9张图片             IE11可用               前端开发笔记--flex布局_第10张图片

                                 center                                                                     stretch

(6)align-content(多主轴时垂直方向上的对齐),使用这个属性后align-items无效。flex-start(顶部对齐),flex-end(底部对齐),center(居中对齐),space-between(两端对齐),space-around(沿垂直轴线均匀分布),stretch(各行将根据其flex-grow值延伸充分占据剩余空间)

                                          前端开发笔记--flex布局_第11张图片IE11可用

2、容器中元素的属性

(1)order:其值为整数,默认0,整数越小,排列越靠前。

前端开发笔记--flex布局_第12张图片IE11可用

(2)flex-grow:当容器有多余空间,item是否放大(主轴方向放大),默认0(即使有空间也不放大),有多余空间是按整数的比例放大

前端开发笔记--flex布局_第13张图片IE10可用

(3)flex-shrink:当容器空间不足时,item是否缩小,默认值为1,表示空间不足时,item自动缩小,值为整数,表示不同的缩小比例

前端开发笔记--flex布局_第14张图片中间两相对小一点我设置左右为1,中间为2           IE10可用

(4)flex-basis:表示项目在主轴占据的空间,默认值为auto,值可以是px,rem,%

前端开发笔记--flex布局_第15张图片我设置第一个为40%            IE10可用

(5)flex:是上面(2)(3)(4)属性的综合

(6)align-self:允许item有自己独特的在垂直轴上的对齐方式,默认为auto(和父元素align-items值一致),flex-start(顶部对齐),flex-end(底部对齐),center(居中对齐),baseline(item第一行文字底部对齐),stretch(当item未设置高度时,item将和容器等高对齐)

前端开发笔记--flex布局_第16张图片IE11可用

 

 

 

 

你可能感兴趣的:(前端开发)