flex伸缩布局 | 易学教程

重要性：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

1、重要属性

display:flex:如果父容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)===当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩

justify-content: 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式,语法：justify-content：flex-start | flex-end | center | space-between | space-around

flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。（让子元素从父容器的起始位置开始排列）
flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。（让子元素从父容器的结束位置开始排列）
center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）（让子元素从父容器的中间位置开始排列）
space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start'。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。（左右对齐父容器的开始和结束，中间平均分页，产生相同的间距）
space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。（将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍）

flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制flex容器是单行或者多行。

flex-direction： flex-direction：row | row-reverse | column | column-reverse

row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。（水平排列方向，从左到右）
row-reverse：对齐方式与row相反。（水平排列方向，从右到左）
column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。（垂直排列方向，从上到下）
column-reverse：对齐方式与column相反。（垂直排列方向，从下到上）

flex-wrap： flex-wrap：nowrap | wrap | wrap-reverse

nowrap：flex容器为单行。该情况下flex子项可能会溢出容器（不换行--则收缩）
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行（换行）
wrap-reverse：反转 wrap 排列。（翻转，原来是从上到下，翻转后就是从下到上来排列）

flex属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

语法：flex: [flex-grow] [flex-shrink] [flex-basis]：大多数情况下没必要使用这种语法，当使用flex缩写时，大多数情况下没必要使用这种语法

flex-grow

flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值
比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默认是0:说明子元素并不会去占据剩余的空间

flex-shrink

flex-shrink:定义收缩比例，通过设置的值来计算收缩空间
比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
默认值为1

flex: [number]：这个语法指定了一个数字，代表了这个伸缩项目（子元素）该占用的剩余空间比例
flex: auto：属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间

案例1：伸缩菜单项

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 500px;
            height: 400px;
            border: 1px solid #ccc;
            margin:100px auto;
        }
        div > ul{
            list-style: none;
            width: 100%;
            /*将父容器设置了伸缩盒子，子元素默认成为伸缩项  float margin*/
            display: flex;
        }
        div > ul > li{
            /*宽度
            1.我们并不知道li的具体的数量
            2.也不直接设置%*/
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-color: #9fff9d;
            border-right: 1px solid #ccc;
            flex: 1;
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>首页</li>
        <li>商品分类</li>
        <li>我的订单</li>
        <li>最新商品</li>
        <li>联系我们</li>
    </ul>
</div>

后期可能会加菜单选项，就没有设置每一个菜单项的宽度，用的伸缩布局，这样后期就算多加入几个菜单项也会平均分配父元素所剩下的剩余空间。做到收缩自适应效果

案例2、宽高自适应

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .layout{
            width: 500px;
            height: 600px;
            background-color: #CCCCCC;
            margin:10px auto;
            /*设置父容器为伸缩盒子*/
            display: flex;
            /*默认的主轴是row,这里需要以列的方式进行排列*/
            flex-direction: column;
        }
        header{
            width: 100%;
            height: 60px;
            background-color: red;
        }
        main{
            width: 100%;
            background-color: green;
            /*让当前伸缩项占据父容器的剩余空间*/
            flex: 1;
            /*让main成为伸缩盒子*/
            display: flex;
        }
        main > article{
            height: 100%;
            flex: 1;
            background-color: pink;
        }
        main > aside{
            height: 100%;
            flex: 3;
            background-color: darkblue;
        }
        footer{
            width: 100%;
            height: 80px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div class="layout">
    <header></header>
    <main>
        <article></article>
        <aside></aside>
    </main>
    <footer></footer>
</div>

这样无论浏览器是缩小还是放大，都可以做到自适应的效果

案例3：携程网

  <style>
        *{
            padding: 0;
            margin: 0;
        }
        /*顶部块样式*/
        header{
            width: 100%;
            /*设置为伸缩盒子*/
            display: flex;
        }
        header > a{
            /*width: 100%;*/
            /*flex:设置当前子元素占据父容器剩余宽度的比例*/
            flex: 1;
        }
        header > a > img{
            width: 100%;
        }
        /*主体内容块样式*/
        main{
            width: 100%;
            padding:0 10px;
            /*设置盒模型*/
            box-sizing: border-box;
        }
        main > .item{
            width: 100%;
            height: 100px;
            background-color: #57c3ae;
            border-radius: 10px;
            margin-top:10px;
            /*设置为伸缩盒子*/
            display: flex;
        }
        main > .item:nth-of-type(2){
            background-color: #33aa46;
        }
        main > .item:nth-of-type(3){
            background-color: #aa4b40;
        }
        main > .item:nth-of-type(4){
            background-color: #445faa;
        }
        main > .item > .left{
            flex: 1;
        }
        main > .item > .right{
            flex: 2;
            /*设置换行显示*/
            flex-wrap: wrap;
            /*设置为伸缩盒子*/
            display: flex;
        }
        main > .item > .right > a{
            /*如果想让子元素换行显示，必须为子元素设置宽度*/
            width: 50%;
            box-sizing: border-box;
            border-left: 1px solid #fff;
            border-bottom: 1px solid #fff;
            display: block;
            color: #fff;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
        }
        main > .item > .right > a:nth-last-of-type(-n+2){
            border-bottom:none
        }
        main > .extra{
            width: 100%;
            display: flex;
        }
        main > .extra > a{
            flex: 1;
        }
        main > .extra > a > img{
            width: 100%;
        }
        /*底部块样式*/
        footer{
            width: 100%;
            font-size: 13px;
        }
        footer > nav{
            width: 100%;
            display: flex;
            border-top:1px solid #ccc;
            border-bottom:1px solid #ccc;
        }
        footer > nav > a{
            flex: 1;
            line-height: 30px;
            text-align: center;
            color: #888;
            text-decoration: none;
        }
        footer > .link{
            text-align: center;
            line-height: 25px;
        }
        footer > .copyRight{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <a href="">
            <img src="../images/banner.jpg" alt="">
        </a>
    </header>
    <main>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="item">
            <div class="left"></div>
            <div class="right">
                <a href="">海外酒店</a>
                <a href="">团购</a>
                <a href="">特惠酒店</a>
                <a href="">客栈公寓</a>
            </div>
        </section>
        <section class="extra">
            <a href="">
                <img src="../images/extra_1.png" alt="">
            </a>
            <a href="">
                <img src="../images/extra_2.png" alt="">
            </a>
        </section>
    </main>
    <footer>
        <nav>
            <a href="">电话预订</a>
            <a href="">下载客户端</a>
            <a href="">我的订单</a>
        </nav>
        <p class="link">
            <a href="">网站地图</a>
            <a href="">ENGLISH</a>
            <a href="">电脑版</a>
        </p>
        <p class="copyRight">&copy;2015 携程旅行</p>
    </footer>
</div>

在携程网这个案例中有一个要注意的地方那就是如果子元素想要换行显示，必须为子元素设置宽度。如海外酒店这些子元素想要换行显示的话就得设置宽度。

来源：https://blog.csdn.net/yyy_wj/article/details/102711609

标签

flex布局