CSS布局—Flexbox弹性布局任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。 We

what Is Flexbox

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

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

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

main axis 水平主轴 main start 主轴开始位置 main end ：主轴结束位置

cross axis 垂直交叉轴 cross start 交叉轴开始位置 cross end ：交叉轴结束位置

单个item占据水平主轴的空间：main size

单个item占据垂直交叉轴的空间：cross size

About Container Flex容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction ：确定main axis主轴方向，即item排列方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row ：（默认）水平方向，从左往右

row-reverse ：水平方向，从右往左

column : 垂直方向，起点在上

column-reverse : 垂直方向，起点在下

flex-wrap ：如果一条轴线排不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap ：（默认）不换行

wrap：换行，第一行在上方

wrap-reverse ：换行，第一行在下方

flex-flow ：flex-direction 和 flex-wrap 的简写形式默认 row nowrap

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content ：定义项目在主轴的对齐方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start （默认值）：左对齐

flex-end ：右对齐

center ：居中

space-between ：两端对齐，项目之间的间隔都相等

space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items ：定义项目在交叉轴对齐方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline：项目的第一行文字的基线对齐。

stretch：（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content ：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-stat：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
strech（默认值）：轴线占满整个交叉轴。

About Item 项目的属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0

flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex 属性是flex-grow

，

flex-shrink和 flex-basis的简写。

默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

from：Flex 布局教程：实例篇

一、骰子的布局

HTML模板

<div class="box">
  <span class="item"></span>
</div>

div元素（代表骰子的一个面）是Flex容器，span元素（代表一个点）是Flex项目。如果有多个项目，就要添加多个span元素，以此类推。

HTML代码如下。

<div class="box">
  <div class="row">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
  </div>
  <div class="row">
    <span class="item"></span>
  </div>
  <div class="row">
     <span class="item"></span>
     <span class="item"></span>
  </div>
</div>

CSS代码如下。

.box {
  display: flex;
  flex-wrap: wrap;
}

.row{
  flex-basis: 100%;
  display:flex;
}

.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}

二、网格布局

2.1基本网格布局

在容器里面平均分配空间，需要设置项目的自动缩放。

2.2百分百比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。

三、圣杯布局

页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

HTML代码如下。

<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>

CSS代码如下。

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}

如果是小屏幕，躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

四、输入框的布局

需要在输入框的前方添加提示，后方添加按钮。

五、悬挂式布局

主栏的左侧或右侧，需要添加一个图片栏。

六、固定的底栏

页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

七，流式布局

每行的项目数固定，会自动分行。