CSS佈局之flex佈局

時間  2019-11-09
標籤 css 佈局 flex 欄目 CSS 简体版
原文   原文鏈接
最近項目中涉及到手機端開發，那麼flex佈局是必不可少的，這裏我來從新梳理一下

1. 介紹

flex佈局也被成爲伸縮盒佈局，在flex佈局模型中，flex容器的子元素能夠在x軸或y軸上進行佈局，而且子元素能夠伸縮他們的大小，當容器中還有空間它們會伸展以填充容器未使用的空間，當容器空間縮小的時候，他們也會跟着縮小。bootstrap

2. 應用

2.0 基本概念

主軸與交叉軸,主軸由flex-direction來定義，交叉軸是主軸的垂直方向的軸app

- flex-direction:row

clipboard.png

clipboard.png

- flex-direction:column

clipboard.png

clipboard.png

2.1 hello world

伸縮盒佈局的應用很簡單，只須要爲容器元素添加display: flex;便可框架

<article class="container_1">
        <section>one</section>
        <section>
            two <br>
            two_1 <br>
            two_2 <br>    
            two_3 <br>
        </section>
        <section>three</section>
    </article>
    
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container_1 {
            display: flex;
            justify-content: flex-start;
            /*平分容器，內容居中*/
            /*justify-content: space-around; */
            /*平分容器，內容顯示在邊緣，其他被空白佔*/
            /*justify-content: space-between;*/
            /*內容居中*/
            /*justify-content: center;*/
        }
        .container_1 > section:nth-child(1){
            background-color: lightblue;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
        }
        .container_1 > section:nth-child(4){
            background-color: orange;
        }
    </style>
  • justify-content: flex-start;如圖，內容在flex容器的左側開始排列，空白顯示在右側

clipboard.png

  • justify-content: space-around; 如圖，空白會被等分而後填充到子元素的左右

clipboard.png

  • justify-content: space-between; 如圖，空白不會出現左右邊緣,其他部分空白等分而且進行填充

clipboard.png

  • justify-content: center; 如圖，內容居中，空白均分出如今兩側

clipboard.png

  • 若是子元素的內容足夠多，將如圖顯示

clipboard.png

2.2 align-items

用於定義與主軸垂直方向上子元素的顯示方式佈局

  • align-items: stretch; 默認值，拉伸

clipboard.png

  • align-items: center; 不拉伸，居中顯示

clipboard.png

  • align-items: flex-start;不拉伸，在flex佈局的開始位置顯示

clipboard.png

  • align-items: flex-end; 不拉伸，在flex佈局的結束位置顯示

clipboard.png

2.3 flex-direction

定義主軸方向，默認主軸爲X周，該屬性的取值爲 rowflex

  • flex-direction: row; 主軸爲X軸

clipboard.png

  • flex-direction: column; 主軸爲Y軸

clipboard.png

2.4 flex-wrap

定義是否能夠換行，默認值爲nowrapspa

  • flex-wrap:nowrap ,當flex item中的文本足夠長的時候也不會致使其餘item換行，而是調整其高度以容納更多內容。

clipboard.png

  • flex-wrap:wrap ,當flex item中的文本足夠長的時候會佔滿整個容器，而後其餘item將會致使換行

clipboard.png

2.5 flex-flow

是flex-direction 與 flex-wrap的速寫形式。例如3d

flex-flow: row wrap;

2.6 flex-basis 與 flex-grow

這兩個屬性定義在flex item上，flex-basis定義了在分配多餘空間以前，flex item佔據的主軸空間,默認值爲auto,與width相似。 flex-grow定了分配多餘空間的的規則,例如code

<style>
        .container_1 {
            margin: 0 auto;
            width: 600px;
            display: flex;
            flex-flow: row nowrap;
        }
        .container_1 > section:nth-child(1){
            background-color: lightblue;
            flex-basis: 100px;
            flex-grow: 1;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
            flex-basis: 100px;
            flex-grow: 2;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
            flex-basis: 100px;
            flex-grow:1; 
        }
    </style>

    <article class="container_1">
        <section>flex is a new value  added to the CSS display property. Along with inline-flex it causes the element that it applies to to become a flex container, and the element's children to each become a flex item. The items then participate in flex layout</section>
        <section>
            two <br>
            two_1 <br>
            two_2 <br>    
            two_3 <br>
        </section>
        <section>flex is a </section>
    </article>

從上面的樣式上，咱們能夠看出，每一個section的flex-basis 基礎寬度爲100px,flex容器總寬度爲600px，這樣，剩下的空白區域也就是300px，那麼這300像素如何風格呢？這時候就要看沒有flex item的flex-grow取值，該值默認爲auto,可是咱們這裏是這麼指定的，第一個第三個section爲1，第二個section爲2，也就是說第一個第三個section各佔1/4，也就是75px,第二個section佔2/4，也就是150px。因此最後第一個第三個section佔175px,第二個section佔250px.blog

clipboard.png

2.7 flex-basis 與 flex-shrink

flex-shrink 一樣應用到flex item元素上，與flex-grow做用相反，flex-grow表示當flex-basis的和小於flex容器寬度的時候，如何分配剩餘空間進行寬度的增加。而flex-shrink表示當flex-basis的和大於flex容器寬度的時候，按照哪一種比例進行縮小three

<style>
        .container_1 {
            margin: 0 auto;
            width: 600px;
            display: flex;
            flex-flow: row nowrap;
        }
        .container_1 > section:nth-child(1){
            background-color: lightblue;
            flex-basis: 300px;
            flex-grow: 1;
            flex-shrink: 1;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
            flex-basis: 300px;
            flex-grow: 2;
            flex-shrink: 2;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
            flex-basis: 300px;
            flex-grow:1; 
            flex-shrink: 1;
        }
        .container_1 > section:nth-child(4){
            background-color: orange;
        }
    </style>

flex容器的寬度爲600px;而flex item加起來爲900px,爲了能佔滿flex容器，flex item必須縮小300px; 那麼誰應該縮小呢？這時候要看每一個flex item上flex-shrink的定義,而後計算出比例

clipboard.png

2.7 flex速寫

通常狀況下，咱們不多使用flex-basis,flex-grow,flex-shrink,而是使用它們的速寫形式flex。

flex: flex-grow flex-shrink flex-basis

例如

.container_1 > section:nth-child(1){
            background-color: lightblue;
            flex-basis: 1 1 300px;
        }
        .container_1 > section:nth-child(2){
            background-color: pink;
            flex-basis:2 2 300px;
        }
        .container_1 > section:nth-child(3){
            background-color: lightgreen;
            flex-basis:1 1 300px;
        }

3. flex實際應用

在實際開發過程當中，咱們常常會應用到網格佈局，通常採用的是float技術，而後封裝成一個網格框架進行應用，例如bootstrap的網格佈局。可是網格佈局也有一些缺陷，好比，它具備兩個維度，行與列，再有些項目中咱們但願咱們的item是一維的，例如：

<style>
        body {
            margin: 0;
            padding: 0;
        }
        .container_1 {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-around;
        }
        .container_1 > section {
            margin: .5em;
            flex: 1 1 200px;
            background-color: orange;
        }
    </style>

    <article class="container_1">
        <section>
            one <br>
            one <br>
            one <br>
            one <br>
        </section>
        <section>two</section>
        <section>three</section>
        <section>four</section>
        <section>five</section>
        <section>six</section>
        <section>seven</section>
        <section>
            one <br>
            one <br>
            one <br>
            one <br>
        </section>
        <section>two</section>
        <section>three</section>
        <section>four</section>
        <section>five</section>
        <section>six</section>
        <section>seven</section>
    </article>

clipboard.png

clipboard.png

固然，有些同窗以爲這樣可能和需求不相匹配了，由於咱們的代碼中flex item的寬度會發生變化，這時候只須要 flex: 0 1 200px;便可，

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程