一只菜鳥對于彈性布局的總結

B0B0 發布于2019-08-01 18:00 / 1550人閱讀

摘要：它的所有子元素自動成為容器成員，稱為項目，簡稱項目。容器有兩個軸，一個水平主軸一個垂直交叉軸，起點終點都是容器的邊界。為垂直交叉軸對齊方式，擁有的屬性如下交叉軸的起點對齊。將占滿整個容器的高度。

啥是彈性布局（問號臉）？以前盒子的布局都是使用position、float、display來布局的，其實超級煩的，最近發現了一個知識點，那就彈性布局，那就讓我們來看看什么是彈性布局吧！

What"s 彈性布局

彈性就是Flex，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 Flex 布局。
例如：
.box{display:flex;}

.box{inline-display:flex;}

注意，設為flex布局以后，子元素的float、clear和vertical-align屬性將失效!!!

基本概念

采用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex項目（flex item），簡稱"項目"。

容器有兩個軸，一個水平主軸（main axis）一個垂直交叉軸（cross axis），起點終點都是容器的邊界。

How to do

說實話其實我了解的也不多，我只能把我知道的寫出來啦！
例如，先定義兩個盒子：

.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; 
        }

效果圖

大家可以看到兩個盒子都在屏幕的中間，那是因為我們在藍色盒子的樣式中添加了display: flex;align-items: center;justify-content: center;讓我一個個道來。
display:flex讓這個盒子擁有了彈性布局的屬性，而作為子元素的粉紅盒子也被定義了，有其父必有其子嘛，(^▽^)；

justify-content

justify-content為主軸的對齊方式，center顧名思義就是居中咯，當然他還有其他屬性啦

flex-start（默認值）：左對齊

flex-end：右對齊

center：居中

space-between：兩端對齊，項目之間的間隔都相等。

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

align-items

align-items為垂直交叉軸對齊方式，擁有的屬性如下：

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

align-self

大家還可以看到，我們的粉盒子并沒有在它爸爸的中間，那是因為他也有自己的個性呀，那就是我們的align-self啦！
align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。

auto（默認值）: 繼承父元素的屬性。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

stretch：將占滿整個容器的高度。

好啦，我要說的就是這么多了，彈性布局真的是很好用的樣式！！！?
如若對于此文章不滿意還望諒解，一只菜鳥真誠的心！！！?

云服務器 GPU云服務器對于云計算的總結備案對于產品的要求對于人工智能的措施對于登錄界面的sql注入

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51516.html

來自前端菜鳥對css display屬性的理解

摘要：對于一個剛起步的新手來說，搞定屬性確實沒有那么容易。現在我來說說我對幾個屬性值得理解。此屬性是說不讓元素顯示。先上圖是對于行內元素來說的，例如等。對于一個剛起步的新手來說，搞定css屬性確實沒有那么容易。現在我來說說我對display幾個屬性值得理解。（只是幾個經常用到的屬性值），不足的地方還請大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...

TZLLOG 2019-08-29 13:00 評論0 收藏0
來自前端菜鳥對css display屬性的理解

摘要：對于一個剛起步的新手來說，搞定屬性確實沒有那么容易。現在我來說說我對幾個屬性值得理解。此屬性是說不讓元素顯示。先上圖是對于行內元素來說的，例如等。對于一個剛起步的新手來說，搞定css屬性確實沒有那么容易。現在我來說說我對display幾個屬性值得理解。（只是幾個經常用到的屬性值），不足的地方還請大佬們指正。 1.display:none display：none; 此屬性是說不讓元素...

SHERlocked93 2019-08-01 17:14 評論0 收藏0
個人總結（css3新特性）

摘要：要實現這一點，必須規定兩項內容指定要添加效果的屬性指定效果的持續時間。當動畫完成后，保持最后一個屬性值在最后一個關鍵幀中定義。在所指定的一段時間內，在動畫顯示之前，應用開始屬性值在第一個關鍵幀中定義。 1.前言 css3這個相信大家不陌生了，是個非常有趣，神奇的東西！有了css3，js都可以少寫很多！我之前也寫過關于css3的文章，也封裝過css3的一些小動畫。個人覺得css3不難，但...

馬永翠 2019-08-29 13:12 評論0 收藏0
flex布局基本語法

摘要：注本文章按照菜鳥教程布局語法教程為原型稍加修改以方便自己學習菜鳥教程地址年，提出了一種新的方案布局，可以簡便完整響應式地實現各種頁面布局。注 : 本文章按照菜鳥教程 Flex布局語法教程為原型稍加修改,以方便自己學習. 菜鳥教程地址:http://www.runoob.com/w3cnote/flex-grammar.html 2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、...

zhaot 2019-04-23 11:41 評論0 收藏0