資訊專(zhuān)欄INFORMATION COLUMN
摘要：占滿(mǎn)交叉軸上所有的空間使用容器定義的的值以上就是我對(duì)彈性布局的一些知識(shí)點(diǎn)總結(jié)，如有異議，煩請(qǐng)告知，謝謝不努力就淘汰
彈性布局
彈性布局，是一種布局方式
主要解決某個(gè)元素中子元素的布局方式
它為布局提供了強(qiáng)大的靈活性
基本設(shè)置
display: flex; // 將塊級(jí)元素設(shè)置為容器 display: inline-flex // 將行內(nèi)元素設(shè)置為容器
這里出現(xiàn)了容器這個(gè)詞，在彈性布局中有容器和項(xiàng)目的說(shuō)法
容器：要發(fā)生(設(shè)置)彈性布局的子元素，的**父元素**稱(chēng)為容器 項(xiàng)目：要做彈性布局的**子元素們**，稱(chēng)之為項(xiàng)目
彈性布局中也有主軸和交叉軸的概念
項(xiàng)目們排列方向的一條軸(類(lèi)似坐標(biāo)軸中的x、y軸),就稱(chēng)為主軸 和這條主軸垂直相交的軸，就稱(chēng)為交叉軸 默認(rèn)主軸方向是橫向排列，即主軸 -> x軸
特點(diǎn)
當(dāng)元素設(shè)置成彈性容器后，它的所有子元素變成彈性項(xiàng)目 此時(shí)項(xiàng)目的float/clear/vertical-align屬性會(huì)失效容器中的屬性
設(shè)置主軸方向
flex-direction: 取值：row，默認(rèn)值，主軸是x軸，主軸起點(diǎn)是左端 row-reverse, 主軸是x軸，主軸起點(diǎn)是右端 column，主軸是y軸，主軸起點(diǎn)在頂部 column-reverse,主軸是y軸，主軸起點(diǎn)在底部
設(shè)置項(xiàng)目的換行顯示
flex-wrap: 取值：nowrap 默認(rèn)值，空間不夠時(shí)，也不換行，項(xiàng)目自動(dòng)縮小 wrap 空間不夠就換行 wrap-reverse 換行，并反轉(zhuǎn)
上面兩項(xiàng)屬性可以縮寫(xiě)成
flex-flow:
定義項(xiàng)目在主軸上的對(duì)齊方式
justify-content: 取值：flex-start,默認(rèn)值，以主軸起點(diǎn)對(duì)齊 flex-end，以主軸終點(diǎn)對(duì)齊 center 在主軸上居中對(duì)齊 space-between 兩端對(duì)齊，兩端無(wú)空白 space-around 每個(gè)間距大小相同，兩邊會(huì)留白
定義項(xiàng)目在交叉軸上的對(duì)齊方式
align-items: 取值：flex-start 交叉軸起點(diǎn)對(duì)齊 flex-end 交叉軸終點(diǎn)對(duì)齊 center 交叉軸居中對(duì)齊 baseline 交叉軸基線對(duì)齊，就是交叉軸起點(diǎn) stretch 前提，項(xiàng)目不寫(xiě)高。占滿(mǎn)交叉軸上所有的空間項(xiàng)目中的屬性
只能設(shè)置在其中一個(gè)項(xiàng)目上，不會(huì)影響其他項(xiàng)目的效果
order
定義項(xiàng)目排列順序，值越小，越靠近起點(diǎn)，默認(rèn)值為0 取值：無(wú)單位的整數(shù)
flex-grow
定義項(xiàng)目的放大比例 如果容器有足夠大的剩余空間，項(xiàng)目將按比例放大 取值：無(wú)單位整數(shù)，默認(rèn)值0，不放大
flex-shrink
定義項(xiàng)目縮小的比例，容器空間不足時(shí)，項(xiàng)目該如何縮小 取值：無(wú)單位整數(shù)，默認(rèn)值為1。 取值為0，不縮小。取值越大，縮小越快。
flex-basis
主軸存在剩余空間時(shí)，分配給此項(xiàng)目多少空間，默認(rèn)auto即本身寬度 類(lèi)似height和width寫(xiě)法
以上三個(gè)屬性可以縮寫(xiě)為
flex: 默認(rèn)值是 0 1 auto 常用寫(xiě)法 flex:1 -> 1 1 auto 利用這個(gè)可以方便的實(shí)現(xiàn)**圣杯布局** 轉(zhuǎn)載一個(gè)自認(rèn)為不錯(cuò)的實(shí)現(xiàn)方法[css圣杯布局的實(shí)現(xiàn)][1]
align-self
定義當(dāng)前項(xiàng)目在交叉軸上的對(duì)齊方式 這個(gè)屬性會(huì)覆蓋掉容器設(shè)置的align-items屬性 取值：flex-start 交叉軸起點(diǎn)對(duì)齊 flex-end 交叉軸終點(diǎn)對(duì)齊 center 交叉軸居中對(duì)齊 baseline 交叉軸基線對(duì)齊，就是交叉軸起點(diǎn) stretch 前提，項(xiàng)目不寫(xiě)高。占滿(mǎn)交叉軸上所有的空間 auto 使用容器定義的align-items的值
以上就是我對(duì)彈性布局的一些知識(shí)點(diǎn)總結(jié)，如有異議，煩請(qǐng)告知，謝謝
不努力
就淘汰
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114780.html
摘要：了解標(biāo)簽在各瀏覽器當(dāng)中的默認(rèn)樣式，可以讓我們了解，為什么會(huì)要寫(xiě)，當(dāng)中要怎么寫(xiě)樣式最合理。 了解HTML標(biāo)簽在各瀏覽器當(dāng)中的默認(rèn)樣式，可以讓我們了解，為什么會(huì)要寫(xiě)Reset.css，Reset.css當(dāng)中要怎么寫(xiě)樣式最合理。試著思考下面的問(wèn)題： 為什么會(huì)有默認(rèn)樣式？ 每個(gè)瀏覽器的默認(rèn)樣式有什么不同？ Reset.css具體怎么寫(xiě)，每個(gè)瀏覽器展示的效果才會(huì)一致？ 默認(rèn)樣式 這里說(shuō)的默認(rèn)...
答案自己谷歌或百度找。 一、來(lái)源背景 面試題是來(lái)自微博@牛客網(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長(zhǎng)期一個(gè)一個(gè)的記錄下來(lái)的，可能會(huì)有重復(fù)，但基本前端的面試大綱和需要掌握的知識(shí)都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。 二、532道前端真實(shí)大廠面試題 express和koa的對(duì)比，兩者中間件的原理，koa捕獲異常多種情...
答案自己谷歌或百度找。 一、來(lái)源背景 面試題是來(lái)自微博@牛客網(wǎng)發(fā)布的真實(shí)大廠前端面經(jīng)題目，我一直在收集題目長(zhǎng)期一個(gè)一個(gè)的記錄下來(lái)的，可能會(huì)有重復(fù)，但基本前端的面試大綱和需要掌握的知識(shí)都在其中了，面試題僅做學(xué)習(xí)參考，學(xué)習(xí)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。 二、532道前端真實(shí)大廠面試題 express和koa的對(duì)比，兩者中間件的原理，koa捕獲異常多種情...
閱讀 1456·2021-11-24 09:39
閱讀 3635·2021-09-29 09:47
閱讀 1580·2021-09-29 09:34
閱讀 3076·2021-09-10 10:51
閱讀 2543·2019-08-30 15:54
閱讀 3223·2019-08-30 15:54
閱讀 880·2019-08-30 11:07
閱讀 1013·2019-08-29 18:36
