資訊專欄INFORMATION COLUMN
摘要：之前是怎么布局的文檔流負介紹特點塊級布局側(cè)重垂直方向行內(nèi)布局側(cè)重水平方向，布局是與方向無關(guān)的布局可以實現(xiàn)空間自動分配自動對齊彈性靈活適用于簡單的線性布局，更復(fù)雜的布局要交給的布局還沒發(fā)布用法在父元素上加一個就可以了父元素的屬性以下
flex 之前是怎么布局的
normal flow (文檔流)
float
position
display inline-block
負maring
flex 介紹特點：
塊級布局側(cè)重垂直方向、行內(nèi)布局側(cè)重水平方向，flex布局是與方向無關(guān)的
flex 布局可以實現(xiàn)空間自動分配、自動對齊（flexible：彈性、靈活）
flex 適用于簡單的線性布局，更復(fù)雜的布局要交給grid的布局（還沒發(fā)布）
用法在父元素上加一個 display：flex 就可以了
// CSS
.parent{
display: flex;
background: #ccc;
}
.parent div{
width: 100px;
height: 50px;
background: palevioletred;
margin: 15px;
}
flex 父元素的屬性
以下屬性都寫父元素里
以下屬性都寫父元素里
以下屬性都寫父元素里
flex-direction 排列方向 (寫父級元素里)
里面的子元素默認從左向右排列
從右向左排列
flex-direction：row-reverse
從上往下垂直排列
flex-direction：column
從下往上垂直排列
flex-direction：column-reverse
flex-wrap 換行
不換行
flex-wrap：nowrap
換行
flex-wrap：wrap
（flex-wrap 一般配合 flex-direction 使用）
flex-flow 上面兩個的簡寫
flex-flow：row nowrap
justify-content 主軸方向?qū)R方式
所有子元素的盒子放在 在空間內(nèi)居中
justify-content:space-between
所有子元素盒子放在中間
justify-content:center
所有子元素盒子都在周圍（都在周圍）
justify-content:space-around
所有子元素盒子都居左（都居起點）
justify-content:space-start
所有子元素盒子都居右（都居終點）
justify-content:space-end
align-items 側(cè)軸對齊方式（控制子元素對齊方式 父級子級都不要有寬高）
所有子元素 以最高的高度為準（默認）
align-items：stretch
所有子元素 全都向起點靠 -- 頂對齊
align-items：flex-start
所有子元素 全都向終點靠 -- 底對齊
align-items：flex-end
所有子元素 全都向起點靠 -- 居中
align-items：flex-center
align-content 多行/列內(nèi)容對齊方式（用的較少）
把所有子元素 靠向起點
align-content：flex-start
把所有子元素 靠向終點
align-content：flex-end
把所有子元素 平均分配（默認）
align-content：stretch
把空間放在子元素中間
align-content：space-between
把空間放在子元素兩邊
align-content：space-between
以下屬性都寫子元素里
以下屬性都寫子元素里
以下屬性都寫子元素里
flex-grow 增長比例（空間過多時）
分配多余空間（進行擴展的量）
flex-grow：1
flex-shrink 收縮比例（空間不夠時）
數(shù)越大 收縮比例越多
flex-shrink：2
flex-basis 默認大小（一般不用）
默認占的大小
flex-basis：300px
flex 上面三個縮寫
flex： 1 2 300px;
order 順序（代替雙飛翼）
順序在第一個 （每一個子元素都要寫）
order：1
align-self 自身對齊方式
如果父級確定了統(tǒng)一的對齊方式 這個元素可讓子元素 自己選擇自己的對齊方式
align-self：center;
推薦網(wǎng)址：
https://www.runoob.com/w3cnot...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/114883.html
摘要：設(shè)為布局以后，子元素的和屬性將失效。二基本概念采用布局的元素，稱為容器，簡稱容器。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。如果項目只有一根軸線，該屬性不起作用。四項目的屬性注項目屬性的全面理解較為復(fù)雜，可以參考文章 一、Flex布局-前言 Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性,旨在提供一個更有效地布局、對齊方式，并且能夠使容...
摘要：很久沒有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。 很久沒有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個五月的末班車吧。還是得堅持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行 控制子元素的對齊方式 控制子元素的高度／...
摘要：很久沒有寫博客了，這里把之前學(xué)習(xí)布局的一篇筆記整理了一下。其在文檔流中的直接子元素將成為。子元素在容器內(nèi)排列的方向稱為主軸，跟主軸垂直的方向稱為輔軸。 很久沒有寫博客了，這里把之前學(xué)習(xí) flex 布局的一篇筆記整理了一下。發(fā)布到博客上。趕一個五月的末班車吧。還是得堅持啊!! flex 彈性布局FlexBox 可控制子元素: 水平或垂直排成一行 控制子元素的對齊方式 控制子元素的高度／...
閱讀 986·2021-09-26 10:15
閱讀 2063·2021-09-24 10:37
閱讀 2579·2019-08-30 13:46
閱讀 2631·2019-08-30 11:16
閱讀 2419·2019-08-29 10:56
閱讀 2591·2019-08-26 12:24
閱讀 3472·2019-08-23 18:26
閱讀 2661·2019-08-23 15:43
