首頁 > web前端 > css教學 > 詳解CSS3實現彈性佈局的方式

詳解CSS3實現彈性佈局的方式

青灯夜游
發布: 2020-07-11 16:34:46
轉載
3199 人瀏覽過

詳解CSS3實現彈性佈局的方式

一、CSS3彈性盒子

彈性盒子是CSS3的一種新佈局模式。

CSS3 彈性盒( Flexible Box 或 flexbox),是一種當頁面需要適應不同的螢幕大小以及裝置類型時確保元素擁有恰當的行為的佈局方式。

引入彈性盒佈局模型的目的是提供一種更有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

二、瀏覽器支援

表格中的數字表示支援該屬性的第一個瀏覽器的版本號碼。

緊接在數字後面的 -webkit- 或 -moz- 為指定瀏覽器的前綴。

Basic support (single-line flexbox)29.0 21.0 -webkit-11.022.0 18.0 -moz-6.1 -webkit-12.1 -webkit-Multi-line flexbox29.0 21.0 -webkit-11.028.06.1 -webkit-17.0 15.0 -webkit- 12.1
屬性 詳解CSS3實現彈性佈局的方式 詳解CSS3實現彈性佈局的方式 詳解CSS3實現彈性佈局的方式 詳解CSS3實現彈性佈局的方式 詳解CSS3實現彈性佈局的方式

三、CSS3 彈性盒子內容

#彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器透過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。

彈性容器內包含了一個或多個彈性子元素。

注意: 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈置。

彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。

詳解CSS3實現彈性佈局的方式以下元素展示了彈性子元素在一行內顯示,從左到右:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>
登入後複製

四、CSS3 彈性盒子常用屬性屬性#描述指定彈性容器中子元素排列方式設定彈性盒子的子元素超出父容器時是否換行flex-direction 和flex-wrap 的簡稱#設定彈性盒子元素在側軸(縱軸)方向上的對齊方式修改flex-wrap 屬性的行為,類似align-items,但不是設定子元素對齊,而是設定行對齊#設定彈性盒子元素在主軸(橫軸)方向上的對齊方式
##flex -direction
flex-wrap
flex-flow
align-items
align-content
justify-content
######

1. flex-direction 属性

决定项目的方向。

注意:如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
登入後複製

詳解CSS3實現彈性佈局的方式

属性值

描述
row默认值。元素将水平显示,正如一个行一样。
row-reverse与 row 相同,但是以相反的顺序。
column元素将垂直显示,正如一个列一样。
column-reverse与 column 相同,但是以相反的顺序。

2. flex-wrap 属性

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

描述
nowrap默认值。规定元素不拆行或不拆列。
wrap规定元素在必要的时候拆行或拆列。
wrap-reverse规定元素在必要的时候拆行或拆列,但是以相反的顺序。
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }
登入後複製

可以取三个值:

(1) nowrap (默认):不换行。

詳解CSS3實現彈性佈局的方式

(2)wrap:换行,第一行在上方。

詳解CSS3實現彈性佈局的方式

(3)wrap-reverse:换行,第一行在下方。

詳解CSS3實現彈性佈局的方式

3. flex-flow 属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }
登入後複製

4. align-items属性

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

描述
stretch默认值。项目被拉伸以适应容器。
center项目位于容器的中心。
flex-start项目位于容器的开头。
flex-end项目位于容器的结尾。
baseline项目位于容器的基线上。

1詳解CSS3實現彈性佈局的方式

5. justify-content属性

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

描述
flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center项目位于容器的中心。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。

1詳解CSS3實現彈性佈局的方式

五、弹性子元素属性

属性描述
order设置弹性盒子的子元素排列顺序。
flex-grow设置或检索弹性盒子元素的扩展比率。
flex-shrink指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
flex-basis用于设置或检索弹性盒伸缩基准值。
flex设置弹性盒子的子元素如何分配空间。
align-self在弹性子元素上使用。覆盖容器的 align-items 属性。

1. order属性

.flex-container .flex-item { order: <integer>; }
登入後複製

:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

1詳解CSS3實現彈性佈局的方式

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }
登入後複製

:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

1詳解CSS3實現彈性佈局的方式

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }
登入後複製

:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

1詳解CSS3實現彈性佈局的方式

4. flex-basis属性

.flex-container .flex-item { flex-basis: <integer> | auto; }
登入後複製

:一个长度单位或者一个百分比,规定元素的初始长度。

auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。

5. flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item {
flex:flex-grow flex-shrink flex-basis|auto|initial|inherit;
}
登入後複製
描述
flex-grow一个数字,规定项目将相对于其他元素进行扩展的量。
flex-shrink一个数字,规定项目将相对于其他元素进行收缩的量。
flex-basis项目的长度。合法值:"auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto与 1 1 auto 相同。
none与 0 0 auto 相同。
initial设置该属性为它的默认值,即为 0 1 auto。
inherit从父元素继承该属性。

6. align-self属性

.flex-container .flex-item {
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
}
登入後複製
描述
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch 元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

1詳解CSS3實現彈性佈局的方式

取值同 align-items。

参考

本文转载自:https://www.jianshu.com/p/5856c4ae91f2

相关推荐:CSS视频教程

以上是詳解CSS3實現彈性佈局的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:jianshu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板