flex 布局概述

1. flex 是什么flex 是 Flexible Box 的縮寫,意為彈性布局

flex 2009 年就已出現,瀏覽器兼容性很好,請放心使用

2. flex 解決了什么問題塊元素的垂直居中, flex 可以輕松解決

元素大小在容器中的自動伸縮,以適應容器的變化,特別適合移動端布局

3. flex 項目的布局方向是什么一個物體在一個平面中, 要么水平排列, 要么垂直排列, flex 借鑒了這個思想

flex 是一維布局, 項目任何時候只能沿一個方向排列,要么水平, 要么垂直

flex 項目排列的方向, 稱為主軸, 水平和垂直二種

與主軸垂直的稱為交叉軸(有的教程也稱之為副軸/側軸)

4. flex 布局中常用術語有哪些(三個二)序號

簡記

術語

1

二成員

容器和項目(container / item)

2

二根軸

主軸與交叉軸(main-axis / cross-axis)

3

二根線

起始線與結束線(flex-start / flex-end)

flex彈性布局

/* 容器 */

.container{

width:300px;

height:150px;

}

/* 將容器/父元素設置為flex容器,布局只針對子元素、對孫子元素無效 */

.container{

display:flex;

/* inline-flex是針對多個容器的布局 */

display:inline-flex;

}

/* 項目/子元素 */

.item{

width:100px;

height:50px;

background-color:aqua;

font-size:2rem;

}

1

總結

以上是生活随笔為你收集整理的HTML中用弹性布局设置位置,HTML的flex弹性布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。