CSS 之 Flex布局

文章目錄

• • CSS 之 Flex布局
  • • 1、Flex布局 vs 網格布局 （1D vs 2D）
    • 2、Flex屬性
    • • 1）flex-direction屬性 & 排列方向
      • 2）flex控制橫縱軸 & 排列順序（單/雙項目）
      • • a）理解justify-content & align-items
        • b）理解justify-content ：space-between
        • c）for循環排列卡片
    • 3、Flex響應式布局

1、Flex布局 vs 網格布局 （1D vs 2D）

個人理解：Flex是一維的布局（彈性框），柵格布局是二維布局（網格）；兩者相比，Flex布局通過定義了一些排版規則，來彌補一維布局存在的不足，可以用來實現網格二維布局同樣的效果，實現起來較為靈活。

1、CSS3之新特性grid柵格布局：【行row和列column】都自己控制,完全基于CSS控制（未來的主流趨勢，最新的瀏覽器才兼容）

2、float模擬柵格布局：核心控制【列】的一維布局【使用整體：目前市面上最流行的模擬柵格布局,大部分框架都是基于此】

2、flex布局：核心是控制【行的內部布局】形成的一維布局【適合局部：目前市面上最流行的局部布局，大部分框架都開始支持】

參考：https://blog.csdn.net/weixin_43343144/article/details/89046779；flex實現網格效果_網格還是Flex？

2、Flex屬性

1）flex-direction屬性 & 排列方向

flex的flex-direction屬性，通過row，column可以調整排列方向，如果不設置每個元素的width，height，則自適應調整。

這里舉個簡單例子

先對flex的css樣式進行二次封裝

// flex 橫向排列 .flex_row {display: flex !important;flex-direction: row !important;// flex: 1; }//flex 縱向排列 .flex_column {display: flex !important;flex-direction: column !important; }// 均為分布 .flex_between {justify-content: space-between !important; }

下面是簡單的flex布局

<!-- 培訓管理詳情內容 --> <div class="card_bg1 flex_row"> //下面第一級div均為按行排列<div class="flex_column"> //下面的第一級div均為按列排列<div class="card_bg1">xxxxxxxxxxxxxxxxxx</div><div class="card_bg1">xxxxxxxxxxxxxxxxxx</div><div class="card_bg1">xxxxxxxxxxxxxxxxxx</div></div><div class="card_bg1">xxxxxxxxxxxxxxxxxx</div><div class="card_bg1">xxxxxxxxxxxxxxxxxx</div> </div>

效果圖如下

2）flex控制橫縱軸 & 排列順序（單/雙項目）

a）理解justify-content & align-items

對于單項目（可以遍歷循環，按照某個順序進行排列繪制多個單項目）

單項目： justify-content: flex-start/center/flex-end; //控制x軸 align-items: flex-start/center/flex-end; //控制y軸

對于雙項目

雙項目： justify-content: space-between //均勻分布(分別左右對齊)

為了方便css的flex樣式的使用，可以將其進行二次封裝成class

//二次封裝成類 // 從左排列 .flex_j_start {justify-content: flex-start !important; } // 從右排列 .flex_j_end {justify-content: flex-end !important; }//處于x軸上方方向位置 .flex_a_start {align-items: flex-start !important; }//處于x軸下方方向位置 .flex_a_end {align-items: flex-end !important; }

b）理解justify-content ：space-between

該屬性的作用是使得所有元素均勻分布，且各元素間距相同。

參考Flex 布局教程：實例篇

.box {display: flex;flex-direction: column;justify-content: space-between;align-items: center; } .box {display: flex;flex-direction: column;justify-content: space-between; }

接下來看看space-between在實際中是怎么使用的

例子1：

<!-- 培訓詳情主題欄 --><div class="card_bg flex_row"><!-- 培訓詳情按鈕組 --><el-form :inline="true" class="wrap_form"><!-- 按鈕組 --><div class="Button_group"><el-form-item><el-button class="btn_style icon-short-btn" @click="pageBack()"><svg-iconicon-class="arrow-left"/>返回</el-button></el-form-item></div><div class="font_style"> 培訓詳情 </div><!-- 搜索組 --><div class="Search_group"><el-form-item><el-button class="icon-short-btn"><svg-iconicon-class="edit"@click="editBtn(scope.row)"style="color:white;"/>編輯</el-button></el-form-item></div></el-form></div>

其中wrap_form封裝了justify-content: space-between;屬性，效果如下：

如果不使用flex_between，則效果如下：

例子2：

如果不止兩個元素，如下面這個頁面：4個元素在盒子內均勻分布

如果去掉flex_between，則緊貼在一起了

c）for循環排列卡片

該例子通過for循環繪制卡片（會循環輸出v-for所在的div），主要用到的flex樣式為flex_row 按行排列，flex_warp滿行換行，flex_j_start從左排列。

<!-- 卡片視圖 --><div class="wrap_card_person flex_row flex_warp flex_j_start"><divv-for="item in trainManage_obj.trainingManagePersonals":key="item.id"class="dir_car"><div class="car_name flex_row"><img :src="item.photo" @error="handleError($event)" /><div class="car_name_div flex_column"><h3>{{item.user_name}}</h3><p class="serviceLife flex_column"><span>職位：</span>{{item.position}}</p></div></div><ul class="car_information flex_row flex_between"><li class="flex_column"><span>聯系方式:</span>{{item.contact}}</li></ul><div class="car_remark"><h3>備注</h3><p>{{item.remark}}</p></div><div class="car_type"><span></span></div></div></div>

其中flex_row flex_warp flex_a_content flex_j_start flex_between是對css的flex布局樣式的二次封裝類，而wrap_card_person是自定義卡片的css樣式，主要設置每張圖片的width，height。

// 多列布局防止換行 .flex_a_content {align-content: flex-start !important; }// 從左排列 .flex_j_start {justify-content: flex-start !important; //!important表示樣式優先級最高 }// 當width，height達到100%時，會自動換行，而不是去壓縮div的width，height .flex_warp {flex-wrap: wrap !important; }// flex 橫向排列 .flex_row {display: flex !important;flex-direction: row !important;// flex: 1; }// 均為分布 .flex_between {justify-content: space-between !important; }.wrap_card_person {height: 100%;width: 100%;overflow-y: auto;.dir_car {border: 2px solid #131415;width: calc(100% / 4); //每行4個卡片,相比于設置px，css的calc()可以自適應調整布局height: calc(100% / 3);...} }

效果圖如下

參考

• Flex 布局教程：實例篇
• 2分鐘掌握flexbox 布局 - 知乎
• Flex 布局語法教程

3、Flex響應式布局

非響應式布局存在的問題：

Flex由于是一維的布局（橫坐標，縱坐標且單方向），如果要實現非均分布局（沒辦法使用justify-content: space-between），則可以用padding/margin來撐開，參考 解決flex布局中 space-between方法的排版問題。但是這會存在問題，當筆記本屏幕分辨率不同時，頁面的布局會有所不同；當使用縮放時，頁面布局也會跟著變化

要想實現Flex響應式布局，就要用到css的**width: calc(100% / 2)**來實現，頁面效果如下：

參考

• CSS3中width屬性的width: calc(100% - 20px); 使用問題
• flex布局 響應式布局

總結

以上是生活随笔為你收集整理的CSS 之 Flex布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。