CSS3与弹性盒布局

1、弹性盒布局对齐模式

1.1、弹性盒子

在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型，也就是设置 display 为 flex

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹性盒布局</title>
        <style type="text/css">
            .div1{
                width: 800px;
                height: 410px;
                display: flex;/*设置为弹性盒模型*/
                border: 1px solid red;
                margin: 0 auto;
            }
            .div1 a{
                text-decoration: none;
                display: inline-block;
                flex: auto;   /*子元素平均分配父级元素宽度与高度*/
                margin: 5px;
                background-color: #757575;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
        </div>
    </body>
</html>

结果：

1.2、弹性盒子换行显示

flex-wrap：wrap ；    弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹性盒布局</title>
        <style type="text/css">
            .div1{
                width: 800px;
                height: 410px;
                display: flex;/*设置为弹性盒模型*/
                flex-wrap: wrap; /*规定弹性盒子的内容换行显示*/
                border: 1px solid red;
                margin: 0 auto;
            }
            .div1 a{
                text-decoration: none;
                display: inline-block;
                width: 150px;
                height: 200px;
                border: 1px solid red;
                background-color: #757575;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
        </div>
    </body>
</html>

结果：

从上面的结果来看虽然子元素换行显示了但是布局效果并不是很好，好的别着急我们接着往下看

1.3、弹性盒子两端对齐

CSS 语法：justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值：
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

justify-content 的属性值有很多，本次为大家介绍的是 space-between 也是在我们布局中比较好用的一中布局方式，缺点就是兼容性不是很理想

废话就不多说了，给大家试试效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹性盒布局</title>
        <style type="text/css">
            .div1{
                width: 800px;
                height: 410px;
                display: flex;/*设置为弹性盒模型*/
                flex-wrap: wrap; /*规定弹性盒子的内容换行显示*/
                justify-content: space-between; /*规定弹性盒子两端对齐*/
                border: 1px solid red;
                margin: 0 auto;
            }
            .div1 a{
                text-decoration: none;
                display: inline-block;
                width: 150px;
                height: 200px;
                background-color: #757575;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
        </div>
    </body>
</html>

结果：

虽然效果已经很不错了，但是细心的童鞋不难发现我们的子元素并没有与父元素的底部平齐

1.4、弹性盒子交叉轴对齐

CSS 语法 align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

stretch  默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于‘flex-start‘。在其它情况下 ，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

center 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内 容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向 溢出的相等距离。）

flex-start 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之 后的每一行都紧靠住前面一行。

flex-end 元素位于容器的结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界， 之后的每一行都紧靠住前面一行。

space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效 于‘flex-start‘。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹 性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

space-around 元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。 如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于‘center‘。在其它情况下，各行会按一定方式在弹性盒容器中排列，以 保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。

属性值有很多，本次介绍一下 space-between 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹性盒布局</title>
        <style type="text/css">
            .div1{
                width: 800px;
                height: 410px;
                display: flex;/*设置为弹性盒模型*/
                flex-wrap: wrap; /*规定弹性盒子的内容换行显示*/
                justify-content: space-between; /*规定弹性盒子两端对齐*/
                align-content: space-between; /*当弹性盒内容为多行显示是 规定交叉轴对齐*/
                border: 1px solid red;
                margin: 0 auto;
            }
            .div1 a{
                text-decoration: none;
                display: inline-block;
                width: 150px;
                height: 200px;
                background-color: #757575;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
            <a href="##"></a>
        </div>
    </body>
</html>

结果：

非常快速的就完成了一个非常完美的布局了，是不是呢。

小结：这样的布局方式不会脱离标准文档流，所以就不会有需要清除浮动的问题

原文地址：https://www.cnblogs.com/hxw6/p/9573309.html

时间： 2024-11-08 14:06:09

CSS3与弹性盒布局的相关文章

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 弹性盒布局模型

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

CSS3弹性盒布局方式

一.CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 二.浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀. 属性 Basic support (sing

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

弹性盒布局学习总结

近期在做移动端的项目过程中,经常听到有人说用弹性盒布局来写比较快,因为我一直用的是传统的百分比布局(好吧,不敢否认我还是喜欢用拿手的,但是不要鄙视我对新技术的热情),因此一直也想抽空学习下弹性盒布局,看看他到底是何方神圣,能够用到哪些场合,还有浏览器兼容性到底怎么样 一.语法 应用flex布局,首先要设定一个flex容器(flex container),它的子元素就自动成为flex容器的成员,称为flex项目(flex item). .flex_container{ display:flex;

CSS3-box-flex弹性盒布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性盒布局</title> <style> div { height: auto; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-siz

移动端：Flex弹性盒布局

Flex弹性盒布局 一. Flex的发展史 2009年W3C 提出概念,但是官方没有flex这个词 2011年浏览器厂商决定使用flexbox,来形容它的布局特点 2015年W3C正式将其修改为flexbox布局 2016年5月官方正式公布最新的稳定的flex布局规范标准,各大浏览器的支持越来越稳定 二. 定义 Flex是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性 作用 它能够更加高效方便的控制元素的对齐.排列 可以自动计算布局内元素的尺寸,无

flex 弹性盒布局 移动端首页

广告淘宝适配js文件下载地址 https://github.com/amfe/lib-flexible ---------开始------------------------------ 移动首页案例制作  弹性盒布局 body{   的初始化样式 min-width:320px; max-width:540px; margin:0 auto; color:#000; background:#f2f2f2f; overflow-X:hiddenn; -webkit-tap-highlight-c

css3 弹性盒布局的使用-Flex

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