筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。

一、介紹

這一篇主要從設計、原理和應用三個方面來學習一下 Flex 布局。

詳細的可以看看下面兩篇文章：來自阮一峰的網絡日志

• Flex 布局教程：語法篇
• Flex 布局教程：實例篇

二、Flex 的設計

Flex 排版的核心是 display:flex 和 flex 屬性，它們配合使用。具有 display:flex 的元素我們稱為 flex 容器，它的子元素或者盒被稱作 flex 項。

三、Flex 的原理

winter說 Flex 的實現并不復雜，之前winter寫過一個基本實現提交給 spritejs 項目，代碼可以參考

如何實現一個 Flex 布局？

3.1、第一步：分行

把 flex 項分行，有 Flex 屬性的 flex 項可以暫且認為主軸尺寸為 0，所以，它可以一定放進當前行。

3.2、第二步：計算主軸

計算每個 flex 項主軸尺寸和位置。

3.3、第三步：計算交叉軸

計算 flex 項的交叉軸尺寸和位置。

四、Flex 的應用

4.1、垂直居中

<div id="parent"><div id="child"></div> </div> 復制代碼#parent {display:flex;width:300px;height:300px;outline:solid 1px;justify-content:center;align-content:center;align-items:center; } #child {width:100px;height:100px;outline:solid 1px; } 復制代碼

4.2、兩列等高

<div class="parent"><div class="child" style="height:300px;"></div><div class="child"></div> </div> <br/> <div class="parent"><div class="child" ></div><div class="child" style="height:300px;"></div> </div> 復制代碼.parent {display:flex;width:300px;justify-content:center;align-content:center;align-items:stretch; } .child {width:100px;outline:solid 1px; } 復制代碼

4.3、自適應寬

<div class="parent"><div class="child1"></div><div class="child2"></div> </div> 復制代碼.parent {display:flex;width:300px;height:200px;background-color:pink; } .child1 {width:100px;background-color:lightblue; } .child2 {width:100px;flex:1;outline:solid 1px; } 復制代碼

個人總結

還是移動端用起來舒服。。。聽說想要前端進擊的話圖形學是要深究的。。。

轉載于:https://juejin.im/post/5d18956d5188255d3c014ed5

總結

以上是生活随笔為你收集整理的重学前端学习笔记（三十六）--Flex 布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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