css 彈性布局

2021-09-28 21:29:15 字數 661 閱讀 2420

什麼是彈性布局?

flex布局,是h5新出的布局方式,主要代替傳統float浮動布局。

注意:布局要給父元素設定,子元素按照布局方式排列,他會使塊級元素不獨佔一行。

特點:當沒有給彈性布局設定換行時,子元素不會自動換行會在一行顯示。

display: flex; 設定彈性布局

flex-direction:設定布局方向 ;

row;預設的從左至右的順序排列的,代替左浮動/行內塊元素。

row-reverse:按照從右至左的方向排列,代替右浮動。

column:按照從上至下的順序排列,類似於正常文件流布局。

column-reverse:按照從下至上的順序排列。

justify-content: 設定布局對齊方式;

center:居中對齊方式。

flex-start:從開始的位置對齊,頭部對齊。

flex-end:從結束的位置對齊,尾部對齊。

space-around:子元素之間的距離等分。並左右兩邊留白,留白的距離是元素之間距離的一半。

space-between:子元素之間的距離等分,左右兩邊不留白。

flex-wrap: wrap; 設定換行

從超出父元素寬度的子元素開始換行,誰超出父元素從誰開始換行。

CSS 彈性布局

box box box 基本概念 row 預設值 主軸為水平方向,起點在左端。row reverse 主軸為水平方向,起點在右端。column 主軸為垂直方向,起點在上沿。column reverse 主軸為垂直方向,起點在下沿。nowrap 預設 不換行 wrap 換行,第一行在上方 wrap r...

Css 彈性布局

彈性布局 display flex 要發生彈性布局的子元素,他們的父元素,成為容器需設定display flex flex將塊級元素設定為容器 inline flex將行內元素設定為容器 元素設定為flex容器後,容器的text align,vertical align失效設定主軸的方向 flex ...

css彈性布局

在移動端一種方便的布局方式,打破了之前用浮動,定位的布局,更加靈活。包含父元素和子元素,有對應的屬性應用在父元素和子元素達到布局的目的 要開啟彈性布局,父元素要先加上乙個flex屬性 display webkit flex safari display flex 當然,行內元素也可以用彈性布局,同樣...