CSS3弹性盒布局方式

一、CSS3弹性盒子

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

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

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

二、浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性

Basic support (single-line flexbox) 29.0 21.0 -webkit- 11.0 22.0 18.0 -moz- 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox 29.0 21.0 -webkit- 11.0 28.0 6.1 -webkit- 17.0 15.0 -webkit- 12.1

三、CSS3 弹性盒子内容

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

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

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

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

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

以下元素展示了弹性子元素在一行内显示,从左到右:

<!DOCTYPE html>
<html lang="en">
<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 class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>
 

四、CSS3 弹性盒子常用属性

属性 描述
flex-direction 指定弹性容器中子元素排列方式
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
flex-flow flex-direction 和 flex-wrap 的简写
align-items 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式
align-content 修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐
justify-content 设置弹性盒子元素在主轴(横轴)方向上的对齐方式

1. flex-direction 属性

决定项目的方向。

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

.flex-container { flex-direction: row | row-reverse | column | column-reverse; }

属性值

描述
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 (默认):不换行。

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

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

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 项目位于容器的基线上。

5. justify-content属性

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

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

五、弹性子元素属性

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

1. order属性

.flex-container .flex-item { order: <integer>; }

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

2. flex-grow属性

.flex-container .flex-item { flex-grow: <integer>; }

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

3. flex-shrink属性

.flex-container .flex-item { flex-shrink: <integer>; }

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

4. flex-basis属性

.flex-container .flex-item { flex-basis: <integer> | auto; }

<integer>:一个长度单位或者一个百分比,规定元素的初始长度。
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 从父元素继承该属性。

取值同 align-items。

原文地址:https://www.cnblogs.com/xuxiaoyu/p/10858365.html

时间: 2024-10-15 21:04:21

CSS3弹性盒布局方式的相关文章

深入理解 CSS3 弹性盒布局模型

Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最重要的一环就是布局.需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果.这也使得布局的逻辑变得更加复杂.本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求.它的优势在于开发人员只是声明布局应该

CSS3弹性盒布局

使用自适应的窗口弹性盒布局 可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变. 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-c

css3 弹性盒布局的使用-Flex

 介绍: css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布局可以通过嵌套一个伸缩容器(flex container)来辅助实现. Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调整整个布局.它的目的是使用常见的布局模式,比如说三列布局,可 以非常简单的实现.

CSS3 中弹性盒布局,实例说明

相关资料 : http://www.w3.org/html/ig/zh/css-flex-1/ CSS 3中弹性盒布局的最新版概述 在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理. 虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理. 虽然CSS Flexible

CSS3弹性盒模型,Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询 详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox

CSS3弹性盒模型flexbox布局基础版

原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案.另外本人2014年5月还废寝忘食的翻译了国外的<CSS3弹性盒模型flexbox完整教程>和<CSS3弹性盒模型flexbox布局实例>,这么好的文章没有人来发现,实在是遗憾. 文章写作背景 查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始

CSS3与弹性盒布局

1.弹性盒布局对齐模式 1.1.弹性盒子 在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型,也就是设置 display 为 flex 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹性盒布局</title> <style type="text/css"> .div1{ width:

CSS3弹性盒模型flexbox完整版教程

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

CSS3弹性伸缩布局(二)——flex布局

上一篇博客<CSS3弹性伸缩布局(一)——box布局>介绍了旧版本的box布局,而这篇博客将主要介绍最新版本的flex布局的基础知识. 新版本简介 新版本的Flexbox模型是2012年9月提出的工作草案,这个草案是由W3C 推出的最新语法.这个版本立志于指定标准,让新式的浏览器全面兼容,在未来浏览器的更新换代中实现统一. 这里我们还是继续上一篇博客中的例子,使用最新版本的flex布局来实现相同的效果. html代码: <div> <p>发生过的空间还是看价格哈健康啊水