欢迎光临
我们一直在努力

移动web入门 | 弹性盒子(Flex布局)

Flex Box 简介

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

Flex Box 内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex 与 inlin-flex

flex与inlin-fkex的区别就像block与inlin-block的区别,当父元素设置display = flex时,父元素宽度默认撑满整个屏幕:

当父元素设置display = inlin-block时,父元素宽度根据内部元素决定:

flex-decoration属性

flex-decoration属性规定子元素的排列方式,当设置为flex-decoration=row时,元素默认从左到右排列:

.father{
    display: flex;
    border: 1px solid black;
    flex-direction: row;
}

当设置为flex-decoration= row-reverse 时,元素默认从右到左排列:

.father{
    display: flex;
    border: 1px solid black;
    flex-direction:row-reverse;
}

当设置为flex-decoration= column 时,元素默认从上到下排列:

.father{
    display: flex;
    border: 1px solid black;
    flex-direction:column;
}

当设置为flex-decoration= column-reverse 时,元素默认从下到上排列:

.father{
    display: flex;
    border: 1px solid black;
    flex-direction:column-reverse;
}

flex-wrap属性

flex-wrap属性为换行属性,默认是不换行,比如我们添加几个子元素,并为父元素设置宽度 (这时子元素会被压缩) :

.father{
    display: flex;
    width: 500px;
    border: 1px solid black;
}

同样的,只需要我们设置换行属性flex-wrap = wrap ,那么元素就会自动进行换行:

.father{
    display: flex;
    width: 500px;
    border: 1px solid black;
    flex-wrap: wrap;
}

和行row-reserve相似,当我们设置flex-wrap = wrap-reserve时 ,那么元素就会自动进行换行,且下往上排列(列的顺序不变):

.father{
    display: flex;
    width: 500px;
    border: 1px solid black;
    flex-wrap: wrap-reverse;
}

flex-flow 简写属性

我们可以把flex-decoration和flex-wrap简写为flex-flow,如:

.father{
    display: flex;
    width: 500px;
    border: 1px solid black;
    flex-flow: row-reverse nowrap;
}
赞(1) 打赏
未经允许不得转载:散人研 » 移动web入门 | 弹性盒子(Flex布局)
分享到: 更多 (0)

评论 抢沙发

6 + 6 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏