-
flex布局的方向
flex布局有两个方向，一个是主轴的方向，一个是从轴的方向
- flex-direction
决定主轴的方向，即项目排列的方向。决定项目排列方向的有四个值
row (从左到右):主轴的水平方向排列
row-reverse(从右到左):主轴的水平方向排列
column(从上到下):主轴的纵轴的方向排列
column-reverse(从下到上):主轴的纵轴的方向排列
- flex-flow
这个是flex-direction和flex-warp的合体，可以决定子元素的排列方向和是否换行 默认是row nowarp 也就是水平方向排列和不换行 - justify-content
这个决定了元素沿着水平方向是怎么排列的
flex-start 向左对齐
flex-end 向右对齐
center 居中对齐
space-between 两端对齐
space-around 沿着主轴方向均匀分布
- align-items
沿着纵轴的方向进行对齐
flex-start 顶端对齐
flex-end 底端对齐
center 纵轴方向居中对齐
-
作用在flex的item上的属性
- flex-grow
flex-grow 当flex这个容器有多余的空间的时候决定着这个元素放大的比例
- align-self
align-self 可以让元素自己决定自己的对齐方向
总结时间
flex布局更适用于手机端的布局，是因为大部分的手机浏览器都支持
flex布局有点像bootstrap的布局，虽然boostrap是通过媒体查询的方式来适应不同的环境，确实有了flex布局，要方便很多
网友评论