資訊專欄INFORMATION COLUMN
摘要：它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡(jiǎn)稱項(xiàng)目。容器有兩個(gè)軸，一個(gè)水平主軸一個(gè)垂直交叉軸，起點(diǎn)終點(diǎn)都是容器的邊界。為垂直交叉軸對(duì)齊方式，擁有的屬性如下交叉軸的起點(diǎn)對(duì)齊。將占滿整個(gè)容器的高度。
啥是彈性布局（問號(hào)臉）？以前盒子的布局都是使用position、float、display來布局的，其實(shí)超級(jí)煩的，最近發(fā)現(xiàn)了一個(gè)知識(shí)點(diǎn)，那就彈性布局，那就讓我們來看看什么是彈性布局吧！
What"s 彈性布局彈性就是Flex，用來為盒狀模型提供最大的靈活性，任何一個(gè)容器都可以指定為 Flex 布局。
例如：
.box{display:flex;}
.box{inline-display:flex;}
注意，設(shè)為flex布局以后，子元素的float、clear和vertical-align屬性將失效!!!
基本概念采用flex布局的元素，稱為flex容器（flex container），簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員，稱為flex項(xiàng)目（flex item），簡(jiǎn)稱"項(xiàng)目"。
容器有兩個(gè)軸，一個(gè)水平主軸（main axis）一個(gè)垂直交叉軸（cross axis），起點(diǎn)終點(diǎn)都是容器的邊界。
How to do說實(shí)話其實(shí)我了解的也不多，我只能把我知道的寫出來啦！
例如，先定義兩個(gè)盒子：
.box{
width: 200px;
height: 200px;
background-color: rgb(135, 135, 248);
display: flex;
align-items: center;
justify-content: center;
}
.inner {
width: 100px;
height: 100px;
background: pink;
align-self: flex-end;
}
效果圖
大家可以看到兩個(gè)盒子都在屏幕的中間，那是因?yàn)槲覀冊(cè)谒{(lán)色盒子的樣式中添加了display: flex;align-items: center;justify-content: center;讓我一個(gè)個(gè)道來。
display:flex讓這個(gè)盒子擁有了彈性布局的屬性，而作為子元素的粉紅盒子也被定義了，有其父必有其子嘛，(^▽^)；
justify-content為主軸的對(duì)齊方式，center顧名思義就是居中咯，當(dāng)然他還有其他屬性啦
flex-start（默認(rèn)值）：左對(duì)齊
flex-end：右對(duì)齊
center： 居中
space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。
space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。
align-itemsalign-items為垂直交叉軸對(duì)齊方式，擁有的屬性如下：
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。
baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。
stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。
align-self大家還可以看到，我們的粉盒子并沒有在它爸爸的中間，那是因?yàn)樗灿凶约旱膫€(gè)性呀，那就是我們的align-self啦！
align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。
auto（默認(rèn)值）: 繼承父元素的屬性。
flex-start：交叉軸的起點(diǎn)對(duì)齊。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊。
stretch：將占滿整個(gè)容器的高度。
好啦，我要說的就是這么多了，彈性布局真的是很好用的樣式！??！?
如若對(duì)于此文章不滿意還望諒解，一只菜鳥真誠(chéng)的心?。?！?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/51516.html
摘要：對(duì)于一個(gè)剛起步的新手來說，搞定屬性確實(shí)沒有那么容易?，F(xiàn)在我來說說我對(duì)幾個(gè)屬性值得理解。此屬性是說不讓元素顯示。先上圖是對(duì)于行內(nèi)元素來說的，例如等。 對(duì)于一個(gè)剛起步的新手來說，搞定css屬性確實(shí)沒有那么容易。現(xiàn)在我來說說我對(duì)display幾個(gè)屬性值得理解。（只是幾個(gè)經(jīng)常用到的屬性值），不足的地方還請(qǐng)大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...
摘要：對(duì)于一個(gè)剛起步的新手來說，搞定屬性確實(shí)沒有那么容易。現(xiàn)在我來說說我對(duì)幾個(gè)屬性值得理解。此屬性是說不讓元素顯示。先上圖是對(duì)于行內(nèi)元素來說的，例如等。 對(duì)于一個(gè)剛起步的新手來說，搞定css屬性確實(shí)沒有那么容易。現(xiàn)在我來說說我對(duì)display幾個(gè)屬性值得理解。（只是幾個(gè)經(jīng)常用到的屬性值），不足的地方還請(qǐng)大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...
摘要：要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容指定要添加效果的屬性指定效果的持續(xù)時(shí)間。當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值在最后一個(gè)關(guān)鍵幀中定義。在所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值在第一個(gè)關(guān)鍵幀中定義。 1.前言 css3這個(gè)相信大家不陌生了，是個(gè)非常有趣，神奇的東西！有了css3，js都可以少寫很多！我之前也寫過關(guān)于css3的文章，也封裝過css3的一些小動(dòng)畫。個(gè)人覺得css3不難，但...
摘要：注本文章按照菜鳥教程布局語法教程為原型稍加修改以方便自己學(xué)習(xí)菜鳥教程地址年，提出了一種新的方案布局，可以簡(jiǎn)便完整響應(yīng)式地實(shí)現(xiàn)各種頁面布局。注 : 本文章按照菜鳥教程 Flex布局語法教程為原型稍加修改,以方便自己學(xué)習(xí). 菜鳥教程地址:http://www.runoob.com/w3cnote/flex-grammar.html 2009年，W3C提出了一種新的方案—-Flex布局，可以簡(jiǎn)便、...
閱讀 2183·2023-04-25 20:52
閱讀 2579·2021-09-22 15:22
閱讀 2206·2021-08-09 13:44
閱讀 1826·2019-08-30 13:55
閱讀 2907·2019-08-23 15:42
閱讀 2364·2019-08-23 14:14
閱讀 2948·2019-08-23 13:58
閱讀 3085·2019-08-23 11:49
