css筆記 八 彈性布局 更好的適應移動端 實戰

加在子元素身上的屬性

實戰寫給看到最後的你

宣告加到父盒子身上 display:flex;

預設在主軸方向是 水平方向 然後左對齊

1.主軸上的對齊方式 justify-content

屬性含義

flex-start

左對齊flex-end

右對齊center

居中space-bettween

兩端對齊，中間間距等分

space-around

兩端的間距是中間的一半

space-evenly

每個子項左右兩側間距等分

2.設定主軸方向 flex-direction

屬性含義

row預設的水平

column

垂直row-reverse

起始和末尾端反一下

column-reverse

起始和末尾端反一下

3.設定交叉軸對齊方式 align-items

屬性含義

flex-start

起始位置

flex-end

結束位置

center

居中對齊

baseline

基線對齊

stretch

延伸佔滿預設

4.換行 flex-wrap

屬性含義

wrap

換行no-wrap

不換行 會收縮

wrap-revserse

行上下顛倒

5.復合屬性 flex-flow

是flex-direction flex-wrap 的 復合寫法

1.order屬性

排序的屬性

order:n

2.flex佔比屬性

屬性含義

flex-shrink

當子項和大於父盒子的寬度會根據比例來收縮 可以設定成 0 預設為1

flex-grow

子項寬度和小於父盒子寬度 會有 留白 可以設定 按照比例佔據空白空間 預設是0 也就是不佔據

flex-basis

設定 子項寬度 會覆蓋 掉width

flex

復合屬性 flex(增長 縮減 基礎)

上面沒看太明白也沒什麼關係

來看看下面的 案例

這就是官網提供的頁面

今天就來 仿照這個 練習 flex布局

class

="box"
>
>
>
src=
"./e2bcc411170524f0.png.webp"
alt="
">
>
京東超市p
>
li>
>
src=
"./e2bcc411170524f0.png.webp"
alt="
">
>
京東超市p
大概就是這個死樣子了 文字 圖對齊可以使用text-align:center;
實現 在來 多複製幾個
按照傳統布局的 方案 那就是要 浮動 然後 在清浮動
然後 給 ul 設定成 彈性盒子
ul

哦侯 直接併排

設定主軸引數看一下效果

justify-content: flex-start;(預設效果就是上面的那個樣子)

justify-content: flex-end;設定 結束 對齊

justify-content: center; 劇中對齊

justify-content: space-between;兩端對齊

justify-content: space-around;兩端的間距是中間的一半

justify-content: space-evenly;均分

這樣子 第一行 不就 ok 了嗎

然後第二行 我們弄乙個溢位 換行

flex-wrap: wrap;

ul

li

這些調起來就比較方便了

朋友，感謝你看到了最後，新手報道，技術不成熟的地方請多多指點，感謝！

css的flex彈性布局

效果1 給容器設定屬性justify content space evenly，紅色矩形之間的距離相等。除了space evenly值以外，還有sapce between space around 設定屬性align items center 容器內的專案垂直居中。html 效果二 給容器設定屬性a...

css中的彈性布局

需求 多個div從下往上布局 div垂直居中 任何乙個容器可以指定為flex布局，但是td和th等標籤本身已有布局，所以重寫display屬性會使元素失去原有的布局特性 display flex 任何乙個被設定為彈性布局的容器會有兩條抽象的軸，彈性布局的容器的有以下屬性 flex wrap 所有專案...

CSS中的flex（彈性布局）

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