flex記錄

教程:
Flexbox 布局的最簡單表單
Flex 布局教程:語法篇
Flex 布局教程:實例篇

  1. 父元素為 flex 布局時,如果其中一個子元素有高度,即使另一個子元素沒有高度,高度也會被撐開至等高,即默認改變項目的高度:


    image.png
    <div class="wrap">
        <div class="left">
            left
        </div>
        <div class="right">
            right
        </div>
    </div>

       .wrap {
            display: flex;

            width: 400px;
            margin: 200px auto;
            padding: 20px;
            background-color: #ccc;
        }
        .left {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .right {
            background-color: blue
        }
  1. 父元素設置為 flex 布局后,子元素之間沒有間隙,如上面所示。
  2. 讓某個子元素占據剩余橫向空間,比如讓上面的 .right 元素占據剩余寬度,只需給 .right 加上:
flex-grow: 1;

flex-grow的值是占據剩余空間的比例。

  1. 如果需要占據剩余垂直空間,只需讓父元素:
flex-direction: column;
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • H5移動端知識點總結 閱讀目錄 移動開發基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,613評論 0 26
  • 移動開發基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,512評論 0 6
  • 1. 前言 前端圈有個“梗”:在面試時,問個css的position屬性能刷掉一半人,其中不乏工作四五年的同學。在...
    YjWorld閱讀 4,528評論 5 15
  • 一直念念叨叨,一直徹夜難眠。 每個人都想過上安穩的日子,我也不例外。誰愿意看自己一個人在獨木橋上小心翼翼摸索,到后...
    夏辭雨閱讀 739評論 0 2