哈喽~今天做下简单的复盘, 首先呢Flex是Flexible Box的缩写,顾名思义为“弹性布局”,用来布局盒装模型的,简单的说就是排列块级元素, 这里元素在flex中说的是项目 我就说明常用的5个属性,接下来简单说下
三、容器的属性
以下5个属性设置在容器上。
- flex-direction 元素方向的排列, 水平/反方向水平/垂直/反方向垂直这四种,至于什么样式,自己过一遍印象深
.container{ flex-direction:row | row-reverse | column | column-reverse; }
- flex-wrap 项目换行 , 不换行/换行/反方向换行,就这三种样式
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }
- flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认 row nowrap
.container{ flex-flow:<flex-direction> || <flex-wrap>; }
- justify-content 项目水平对齐方式, 左对齐(默认值)/右对齐/中间对齐/两端对齐,项目之间的间隔都相等/每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍
.container{ justify-content:flex-start | flex-end | center | space-between |space-around; }
- align-items 项目垂直对齐 , 上对齐/下对齐/终点对齐/基线对齐/拉升对齐(stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度)
-
.container{ align-items:flex-start | flex-end | center |baseline | stretch; }
这些真的好枯燥啊...现在来一个微信界面实例解说下,
-
首先黄框这水平有序排列的实例 :
.黄框包裹的container{
display: flex; (默认水平方向排列)
justify-content: center;(水平对齐) }
-
解说: 设置样式display: flex和 justify-content: center就搞定啦,原因是当我们设置display: flex,就把所有container包裹的项目都自动分块了,而且flex默认水平方向排列,所以我们只要把对齐方式设为居中就可以实现黄框里的效果 .图例往下拉.
-
至于红框的话是垂直排列的实例:
.红框包裹的container{
display: flex;(默认水平方向排列)
flex-direction: column (改为垂直方向排列)
justify-content: space-between(两端对齐) }
当然具体css细节,如margin,padding,font-size等自己去调整.框架出来了后面就简单了.图例往下拉.
-
总结:
-
首先先设置项目display:flex为弹性布局
-
其次判断自己的项目是想要水平方向排列还是垂直方向排列呢?设置属性flex-direction
-
最后就是项目的对齐方式是需要水平对齐还是垂直还是居中等对齐,设置属性为 justify- content(水平对齐)和align-items(垂直对齐)