學習關於display ：flex 佈局問題！

時間 2019-11-19

標籤學習關於 display flex 佈局問題欄目 CSS 简体版

原文原文鏈接

不少人不明白這個display:flex是究竟是什麼東西，如何使用的。

1.什麼是display：flex呢？html

答：flex是 flexible box的縮寫，意爲彈性佈局；這個東西的引入，爲盒模型提供了最大的靈活性！能夠相應式的實現各類頁面的佈局。佈局

基本概念學習

採用flex佈局的元素，稱爲flex容器(flex container)，簡稱容器。在這個容器中默認存在兩個軸：水平方向的主軸（main axis）和垂直方向上的交叉軸（cross axis）。flex

圖：（摘自：他人博客）ui

如下6個屬性設置在容器上：spa

- flex-direction 容器項目的排列方向（默認是橫向排列）
- flex-wrap 容器內項目的換行方式
- flex-flow flex-direction 和 flex-wrap 屬性的複合屬性。
- justify-content 項目在主軸上對齊樣式
- align-item　　項目在交叉軸上如何對齊
- align-content 定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

注意： 若是元素不是彈性盒對象的元素，則flex-flow 屬性是不起做用的；code

屬性值htm

用法對象

<!DOCTYPE html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <style>
        .father {
            width: 500px;
            height: 100px;
            background-color: red;
            display: flex;
            flex-flow:row;
        }

        .box1 {
            flex: 3;
            background: blue;

        }
        .box2{
            flex: 2;
            background: pink;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>