CSS学习--Flex布局

flex布局

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

display: flex;
display: -webkit-flex; /* Safari */
display: inline-flex

扩展

• flex & margin 实现居中

  <style>
  	.box{display:flex;width:100%;height:100%;}
  	.wrapper{margin:auto;width:100px;height:100px;background:red;}
  </style>
  <div class="box">
  	<div class="wrapper"></div>
  </div>
  

容器属性

flex-direction

指定了内部元素是如何在 flex 容器中布局的

flex-direction: row | row-reverse | column | column-reverse;

属性值	作用
row （默认值）	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

flex-wrap

指定 flex 元素单行显示还是多行显示

flex-wrap: nowrap | wrap | wrap-reverse;

属性值	作用
nowrap（默认）	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

flex-flow

flex-direction 和 flex-wrap 的简写

flex-flow: <flex-direction> <flex-wrap>;
flex-flow: row nowrap;

align-item

交叉轴方向上的对齐方式

align-item: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ];

<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

<baseline-position> = [ first | last ]? baseline

<overflow-position> = unsafe | safe
/* 常用 */
align-item: normal | stretch | center | flex-start | flex-end;

| 属性值 | 作用 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch（默认值）| 如果项目未设置高度或设为auto，将占满整个容器的高度 |

justify-content

弹性容器主轴的元素之间的空间分配方式

justify-content: normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ];

where

<content-distribution> = space-between | space-around | space-evenly | stretch

<content-position> = center | start | end | flex-start | flex-end

<overflow-position> = unsafe | safe
/* 常用 */
justify-content: normal | space-between | space-around | space-evenly | stretch | center | flex-start | flex-end;

属性值	作用
flex-start（默认值）	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	每个元素之间和元素距离边距的距离都相等

容器内元素属性

order

order: 1;

1. 所有 flex 项默认的 order 值是 0。
2. order 值大的 flex 项比 order 值小的在显示顺序中更靠后。

flex-grow

flex增长系数。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间

flex-grow: <number>;

flex-shrink

flex 元素的收缩规则(flex 元素仅在默认宽度之和大于容器的时候才会发生收缩)，flex-shrink属性为0时，空间不足时不缩小

flex-shrink: <number>;

flex-basis

flex 元素在主轴方向上的初始大小。在分配多余空间时，项目占据的主轴空间

flex-basis: auto | <length>;

flex

flex-grow，flex-shrink和flex-basis的缩写

flex: <flex-grow> <flex-shrink> <flex-basis>;
flex: 0 1 auto | auto (1 1 auto) | none (0 0 auto);

align-self

类似align-items，只是多了一个auto值，当align-self值为auto时，表示继承父元素的align-items属性，若无父元素，则值为stretch。

align-self: normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ] | autp;