css中的彈性布局

2022-08-09 17:09:18 字數 1379 閱讀 6350

需求:多個div從下往上布局 ,div垂直居中

任何乙個容器可以指定為flex布局,但是td和th等標籤本身已有布局,所以重寫display屬性會使元素失去原有的布局特性

display:flex

任何乙個被設定為彈性布局的容器會有兩條抽象的軸,彈性布局的容器的有以下屬性

flex-wrap     所有專案如何被包裹

flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap

justify-content justify-content屬性定義了專案在主軸上的對齊方式。

align-items align-items屬性定義專案在交叉軸上如何對齊

align-content align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>title

title

>

<

style

>

.container

.box

style

>

head

>

<

body

>

<

div

class

="container"

>

<

div

class

="box"

>

1

div>

<

div

class

="box"

>

2

div>

<

div

class

="box"

>

3

div>

<

div

class

="box"

>

4

div>

<

div

class

="box"

>

5

div>

div>

body

>

html

>

CSS中的flex(彈性布局)

父標籤 display flex flex direction row row reverse 橫向 起點方向 rolumn rolumn reverse 縱向 flex wrap nowrap wrap wrap reverse 換 況 flex flow direction 與 wrap 結合 ...

css 彈性布局

什麼是彈性布局?flex布局,是h5新出的布局方式,主要代替傳統float浮動布局。注意 布局要給父元素設定,子元素按照布局方式排列,他會使塊級元素不獨佔一行。特點 當沒有給彈性布局設定換行時,子元素不會自動換行會在一行顯示。display flex 設定彈性布局 flex direction 設定...

CSS 彈性布局

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