flex弹性布局教程

1. 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 纵轴方向居中对齐

2. 作用在flex的item上的属性

• flex-grow

flex-grow 当flex这个容器有多余的空间的时候决定着这个元素放大的比例

• align-self

align-self 可以让元素自己决定自己的对齐方向

总结时间

flex布局更适用于手机端的布局，是因为大部分的手机浏览器都支持
flex布局有点像bootstrap的布局，虽然boostrap是通过媒体查询的方式来适应不同的环境，确实有了flex布局，要方便很多