深入CSS2 | 青训营

块级和行级只能实现比较简单的效果，要么是从上到下，要么是在一行内。为了实现更灵活的布局方式，CSS提出了新的排版上下文，它依旧是一个盒子概念。在一个容器里面有很多子元素，可以通过Flex Box上的一些属性控制盒子里的子元素，比如是从左到右还是从上到下摆放。
Flex Box是什么？

• 一种新的排版上下文
• 它可以控制子级盒子的：摆放的流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行。

<div class="container">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
<style>
    .container {
        display: flex;
    border: 2px solid #966;
    }
    
    .a,.b,.c {
        text-align: center;
        padding: 1em;
    }
    
    .a {
        background: #fcc;
    }

设置display： flex，给container创建了flex布局的上下文，即里面的子元素的行为，从现在开始受容器里面flex相关属性的控制，它不会再去遵循IFC或BFC的规则，而是遵循flex布局的上下文规则。虽然A、B、C三个div都是块级元素，但是它也是从左到右横向地摆放，因为现在默认用的flex排版上下文。它的宽度也受flex排版的控制。在块级的上下文里面，默认情况下A、B、C默认宽度是100%，即占满容器，但现在并不是这样，甚至没有平分，而是根据里面的内容确定的。Flex可以通过相关属性控制一些行为，比如通过flex-direction控制元素流向，默认是从左到右，即row。也可以是row-reverse反过来。也可以控制对齐，在传统的IFC、BFC只有水平和垂直，然而flex中有主轴和侧轴概念。在主轴上用justify-content设置对其，比如flex-start、flex-end和center等。
属性名：justify-content

flex-start      默认值，从起点依次排列
flex-end        从终点依次排列
center          沿主轴居中排列
space-between   沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around    沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly    沿主轴均匀排列，弹性盒子与容器之间间距相等