谈谈flex布局

在面试中常考的就包含flex布局，通常会提问面试者谈谈flex布局的理解，以及怎么设置水平居中，垂直居中，如何实现两栏布局或者三栏布局等等。

首先得先说出flex布局的概念，flex的结构组成，其次讲自己用到最多的flex属性，最后讲自己平时常用的布局，然后谈谈居中问题。说话要层次分明，条理清晰，这样才能体现你对知识点的理解足够透彻。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

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

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。

容器上的属性

     1.flex-direction 属性决定主轴的方向（即项目的排列方向）。
2.flex-wrap 如果一条轴线排不下，如何换行。
3.flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
4.justify-content 属性定义了项目在主轴上的对齐方式。
5.align-items 属性定义项目在交叉轴上如何对齐。
6.align-content 属性定义了多根轴线的对齐方式。

flex-direction

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

     1.row（默认值）：主轴为水平方向，起点在左端。
2.row-reverse：主轴为水平方向，起点在右端。
3.column：主轴为垂直方向，起点在上沿。
4.column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

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

     1.nowrap（默认）：不换行。
2.wrap：换行，第一行在上方。
3.wrap-reverse：换行，第一行在下方。

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around;

     1.flex-start（默认值）：左对齐
2.flex-end：右对齐
3.center：居中
4.space-between：两端对齐，项目之间的间隔都相等。
5.space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items: flex-start | flex-end | center | baseline | stretch;

     1.flex-start：交叉轴的起点对齐。
2.flex-end：交叉轴的终点对齐。
3.center：交叉轴的中点对齐。
4.baseline: 项目的第一行文字的基线对齐。
5.stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

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

说完了flex的基本概念，然后说布局，实现两栏布局，HTML结构如下，实现左边宽度固定，右边自适应的效果。

<div class="wrapper">
    <div class="list">
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
        </ul>
    </div>
    <div class="context">
        内容内容
    </div>
</div>

浮动布局

.list {
    float: left;
    width: 200px;
}


.context {
    border-left: 200px solid #999;
    height: 500px;
}

flex布局

.wrapper {
    display: flex;
}


.list {
    width: 200px;
    background: #999;
}


.context {
    flex: 1;
    height: 500px;
}

grid布局

.wrapper {
    display: grid;
    grid-template-columns: 200px auto;
}


.list {
    background: #999;
}


.context {
    height: 500px;
}

最后再列出几种常见的水平和垂直居中方式。

margin：auto

position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;

translate3d移动

position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);

margin为负数

position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;

flex的居中属性

display: flex;
align-items: center;
justify-content: center;

点击阅读原文有属性配图可以实时预览，更直观哦！