Day16 CSS排版之神flex

今天要介绍十分好用的一个属性display:flex。

有了这个东西以後，不用再担心会排版排到想摔电脑，他可以帮你处理得十分恰到好处，接下来我们就要来认识干货中的干货!

首先我们得要了解外容器与内容器，就是由一个大的div包住3个小的div，形成一个外容器与内容器的关西。

我们先介绍外容器container的属性。
主要是:

display:flex(一定要设定的，不然就不会叫flex排版神器了。)
flex-direction(决定排版方向水平或垂直。)
justify-content(水平方向的对齐模式，但还是要看主轴。)
align-items(垂直方向的对齐模式，但还是要看主轴。)

display:flex

我们一定要在外容器加上这条属性，否则是没有作用的。

flex-direction

排序的方向，决定了是从左往右水平，或是从上往下垂直，也可以相反过来，从右往左水平、或是从下往上垂直。

这是flex预设的排版方向，从左往右排。当然方向也可以透过调整属性改变。

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

row:从左往右。
row-reverse:从右往左。
column:从上往下。
column-reverse:从下往上。

justify-content

排版的靠齐方式(预设水平)，有点像word里面的置中、靠左、靠右、平均分配。

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

总共会有这些属性，大家可以去试试看，最常用的就是center置中。

align-items

一样也是排版的靠齐方式，是交错线(预设垂直)的部分，最常设定的也是center置中。

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

要注意这些属性都是选择一个喔!不要傻傻的全部复制贴上去了。

例如:

.container{
    justify-content:center;
    align-items:center;
}

以下是示范例子

我们需要一个三个项目的版面。分别有图片跟文字。

<body>
    <div class="container">
        <div class="item">
            <img src="https://picsum.photos/seed/picsum/200/250 " alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ipsam eos, accusamus ipsum facilis mollitia, repellendus, eius maiores consequuntur non voluptates esse. Itaque odio laborum aperiam quae dignissimos, deleniti unde!</p>
        </div>
        <div class="item">
            <img src="https://picsum.photos/seed/picsum/200/250" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ipsam eos, accusamus ipsum facilis mollitia, repellendus, eius maiores consequuntur non voluptates esse. Itaque odio laborum aperiam quae dignissimos, deleniti unde!</p>
        </div>
        <div class="item">
            <img src="https://picsum.photos/seed/picsum/200/250" alt="">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum ipsam eos, accusamus ipsum facilis mollitia, repellendus, eius maiores consequuntur non voluptates esse. Itaque odio laborum aperiam quae dignissimos, deleniti unde!</p>
        </div>
    </div>
</body>

这是一开始所呈现的，而我们要开始施展魔法了。

<style>
       .container{                  
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .item{
           width: 300px;
           height: 250px;
           margin: 10px;
       }

       img{
           width: 100%;
           height: 100%;
       }
        
</style>

一个三栏的版面几乎不用30秒完成了!记得要把图片设定成满版，才会占满整个item的宽喔!