[面試專題]Flex 布局

Profeel 發(fā)布于2019-08-01 17:30 / 706人閱讀

摘要：布局標簽空格分隔是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為布局。如果項目只有一根軸線，該屬性不起作用。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。

Flex 布局

標簽（空格分隔）： flex css

Flex:

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為Flex布局。容器分為兩種,塊flex和行內(nèi)flex.

.box{
  display:flex;/*webkit需要加前綴*/
  /*display:inline-flex;*/
}

Flex布局有兩層,采用flex布局的元素稱為flex容器,其子元素則自動成flex item,即項目.
注:flex不同于block,flex容器的子元素的float,clear,vertical-align屬性將失效.

Flex布局:

flex容器有兩根軸:水平主軸就是x軸(main axis)和豎直軸也是y軸(cross axis),兩軸相關位置標識如下:

flex容器屬性:

flex-direction:決定項目的排列方向。

flex-wrap:即一條軸線排不下時如何換行。

flex-flow:是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

justify-content:定義了項目在主軸上的對齊方式。(justify)

align-items:定義項目在交叉軸上如何對齊。

align-content:定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。(換行會產(chǎn)生多軸)

Flex item屬性:

order:定義項目的排列順序。數(shù)值越小，排列越靠前，默認為0。

flex-grow:定義項目的放大比例,如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。

flex-shrink:定義了項目的縮小比例，默認為1，如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

flex-basis:定義了在分配多余空間之前，項目占據(jù)的主軸空間（main size）。

flex:是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

align-self:允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

GPU云服務器云服務器 flex布局專題頁專題系列活動專題頁

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/51178.html

[面試專題]Flex 布局

摘要：布局標簽空格分隔是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為布局。如果項目只有一根軸線，該屬性不起作用。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。 Flex 布局標簽（空格分隔）： flex css Flex: Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex...

cheukyin 2019-08-20 19:00 評論0 收藏0
[面試專題]Flex 布局

摘要：布局標簽空格分隔是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為布局。如果項目只有一根軸線，該屬性不起作用。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。 Flex 布局標簽（空格分隔）： flex css Flex: Flex是Flexible Box的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex...

nemo 2019-08-29 13:16 評論0 收藏0
前端硬核面試專題之 CSS 55 問

摘要：前言本文講解道前端面試的的內(nèi)容。文章原文地址前端硬核面試專題之問。前端硬核面試專題的完整版在此前端硬核面試專題，包含數(shù)據(jù)結(jié)構(gòu)與算法。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文講解 55 道前端面試的 CSS 的內(nèi)容。復習前端面試的知識，是為了鞏固前端的基礎知識，最重要的還是平時的積累！注意：文章...

崔曉明 2019-08-30 15:44 評論0 收藏0
[面試專題]一線互聯(lián)網(wǎng)大廠面試總結(jié)

摘要：道阻且長啊前端面試總結(jié)前端面試筆試面試騰訊一面瀏覽器工作原理瀏覽器的主要組件包括用戶界面包括地址欄后退前進按鈕書簽目錄瀏覽器引擎用來查詢及操作渲染引擎的接口渲染引擎渲染界面和是基于兩種渲染引擎構(gòu)建的，使用自主研發(fā)的渲染引擎，和都使用網(wǎng)絡用來道阻且長啊TAT(前端面試總結(jié)) 前端面試筆試面試騰訊一面 1.瀏覽器工作原理瀏覽器的主要組件包括：用戶界面－包括地址欄、后退/前...

lemanli 2019-08-02 15:57 評論0 收藏0