html弹性盒子布局,div+css3弹性盒子(flex box)布局
一、CSS3 弹性盒子(Flex Box)
弹性盒子是CSS3的一种新布局模式。
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
首先要明白几个概念:
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。
主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为main start 和main end。
交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器(flex container)。
在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)元素。
概念释义
二、浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在数字后面的 -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将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
以下元素展示了弹性子元素在一行内显示,从左到右:
flex弹性盒子
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
}
.item{width: 300px; height: 100px}
.item1-1{ background:red;}
.item1-2{ background:orange;width: 300px; height: 120px}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
弹性盒子布局自动一行填满且不随浏览器大小而变化
四、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-direction: row | row-reverse | column | column-reverse;
四种方向row | row-reverse | column | column-reverse
属性值
值
描述
row
默认值。元素将水平显示,正如一个行一样。
row-reverse
与 row 相同,但是以相反的顺序。
column
元素将垂直显示,正如一个列一样。
column-reverse
与 column 相同,但是以相反的顺序。
flex弹性盒子
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
flex-direction:column;
/* flex-direction: row | row-reverse | column | column-reverse;
* row 默认值。元素将水平显示,正如一个行一样。
row-reverse 与 row 相同,但是以相反的顺序。
column 元素将垂直显示,正如一个列一样。
column-reverse 与 column 相同,但是以相反的顺序*/
}
.item{width: 300px; height: 100px}
.item1-1{ background:red;}
.item1-2{ background:orange;width: 300px; height: 120px}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
flex-direction:column;结果
2. flex-wrap 属性
flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
值
描述
nowrap
默认值。规定元素不拆行或不拆列。
wrap
规定元素在必要的时候拆行或拆列。
wrap-reverse
规定元素在必要的时候拆行或拆列,但是以相反的顺序。
flex-wrap: nowrap | wrap | wrap-reverse;
可以取三个值:
(1) nowrap (默认):不换行。
nowrap
(2)wrap:换行,第一行在上方。
wrap
(3)wrap-reverse:换行,第一行在下方。
wrap-reverse
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
/*flex-direction:column;*/
/* flex-direction 属性 决定项目的方向。
* flex-direction: row | row-reverse | column | column-reverse;
* row 默认值。元素将水平显示,正如一个行一样。
row-reverse 与 row 相同,但是以相反的顺序。
column 元素将垂直显示,正如一个列一样。
column-reverse 与 column 相同,但是以相反的顺序*/
flex-wrap:wrap;
/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap 默认值。规定元素不拆行或不拆列。
wrap 规定元素在必要的时候拆行或拆列。
wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。
* */
}
.item{width: 300px; height: 100px}
.item1-1{ background:red;}
.item1-2{ background:orange;width: 300px; height: 120px}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
flex-wrap:wrap;
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
flex-direction:column;
/* flex-direction 属性 决定项目的方向。
* flex-direction: row | row-reverse | column | column-reverse;
* row 默认值。元素将水平显示,正如一个行一样。
row-reverse 与 row 相同,但是以相反的顺序。
column 元素将垂直显示,正如一个列一样。
column-reverse 与 column 相同,但是以相反的顺序*/
flex-wrap:wrap;
/*flex-wrap 属性 规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap 默认值。规定元素不拆行或不拆列。
wrap 规定元素在必要的时候拆行或拆列。
wrap-reverse 规定元素在必要的时候拆行或拆列,但是以相反的顺序。
* */
}
.item{width: 300px; height: 100px}
.item1-1{ background:red;}
.item1-2{ background:orange;width: 300px; height: 120px}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
flex-direction:column;flex-wrap:wrap;
3. flex-flow 属性
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
/* flex-flow: */
flex-flow:column wrap;
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
flex-flow:row wrap;
/*
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
flex-flow:
例:flex-flow:row wrap;
* * */
}
.item{width: 300px; height: 100px}
.item1-1{ background:red;}
.item1-2{ background:orange;width: 300px; height: 120px}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
flex-flow:row wrap;
4. justify-content属性
justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
值
描述
flex-start
默认值。项目位于容器的开头。
flex-end
项目位于容器的结尾。
center
项目位于容器的中心。
space-between
项目位于各行之间留有空白的容器内。(两端对齐,项目之间的间隔都相等)
space-around
项目位于各行之前、之间、之后都留有空白的容器内。(每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.)
分布图
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
/*justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;*/
/*justify-content:space-around;*/
/*
flex-start 默认值。项目位于容器的开头。
flex-end 项目位于容器的结尾。
center 项目位于容器的中心。
space-between 项目位于各行之间留有空白的容器内。
space-around 项目位于各行之前、之间、之后都留有空白的容器内
*/
}
.item{width: 100px; height: 200px;}
.item1-1{ background:red;height: 100px}
.item1-2{ background:orange;width: 300px;}
.item1-3{ background:yellow;}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
默认 justify-content: flex-start;
justify-content:flex-end
justify-content:flex-end;
justify-content:center
justify-content:center;
justify-content:space-between; /*两端对齐,项目之间的间隔都相等。*/
justify-content:space-between;两端对齐,项目之间的间隔都相等
justify-content:space-around;每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
justify-content:space-around;每个项目两侧的间隔相等.所以,项目之间的间隔比项目与边框的间隔大一倍.
5. align-items属性
align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
值
描述
stretch
默认值。项目被拉伸以适应容器。
center
项目位于容器的中心。
flex-start
项目位于容器的开头。
flex-end
项目位于容器的结尾。
baseline
项目位于容器的基线上。
image
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
align-items: stretch;
/*
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。
baseline: 项目的第一行文字的基线对齐。
* */
}
/*.item{width: 100px; height: 200px;}*/
.item1-1{ background:red;height: 100px;width: 100px;}
.item1-2{ background:orange;width: 300px;height: auto;}
.item1-3{ background:yellow;width: 100px;}
.item1-4{ background:green;width: 100px;}
.item1-5{ background:cyan;width: 100px;}
.item1-6{ background:blue;width: 100px;}
默认align-items: stretch;如果项未设置高度或设为auto,将占满整个容器的高度
align-items:flex-start;
align-items:flex-start;交叉轴的起点对齐
align-items:flex-end;
align-items:flex-end;交叉轴的终点对齐
align-items:center;
align-items:center;交叉轴的中点对齐
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
align-items:baseline;
/*
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。
baseline: 项目的第一行文字的基线对齐。
* */
}
/*.item{width: 100px; height: 200px;}*/
.item1-1{ background:red;height: 100px;width: 100px;
padding: 20px;} /* 修改文字开始的位置 通过padding来修改*/
.item1-2{ background:orange;width: 300px;height: auto;}
.item1-3{ background:yellow;width: 100px;}
.item1-4{ background:green;width: 100px;}
.item1-5{ background:cyan;width: 100px;}
.item1-6{ background:blue;width: 100px;}
align-items:baseline;项目的第一行文字的基线对齐
align-content 定义了多根轴线的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
值
描述
flex-start
与交叉轴的起点对齐。
flex-end
与交叉轴的终点对齐。
center
与交叉轴的中点对齐。
space-between
与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around
每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值)
轴线占满整个交叉轴。
align-content 多根轴线的对齐方式
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
flex-flow:row wrap;
align-content: stretch;
/*
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
* */
}
/*.item{width: 100px; height: 200px;}*/
.item1-1{ background:red;height: 100px;width: 100px; }
.item1-2{ background:orange;width: 300px;height: auto;}
.item1-3{ background:yellow;width: 100px;}
.item1-4{ background:green;width: 100px;}
.item1-5{ background:cyan;width: 100px;}
.item1-6{ background:blue;width: 100px;}
默认align-content:stretch;
align-content:flex-start;
align-content: flex-start;
align-content: flex-end;
align-content: flex-end;
align-content:center;
align-content: center;
align-content:space-between;
align-content: space-between;与交叉轴两端对齐,轴线之间的间隔平均分布。
align-content:space-around;
align-content:space-around;每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
五、flex-item项的常用属性(弹性子元素属性)
属性
描述
order
设置弹性盒子的子元素排列顺序。
flex-grow
设置或检索弹性盒子元素的扩展比率。
flex-shrink
指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
flex-basis
用于设置或检索弹性盒伸缩基准值。
flex
设置弹性盒子的子元素如何分配空间。
align-self
在弹性子元素上使用。覆盖容器的 align-items 属性。
1. order属性
数值越小,排列越靠前,默认为0。
order: ;
:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。
数值越小,排列越靠前
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
}
/*.item{width: 100px; height: 200px;}*/
.item1-1{ background:red;height: 100px;width: 100px; order: 6;}
.item1-2{ background:orange;width: 300px;height: auto;order: 5;}
.item1-3{ background:yellow;width: 100px;order: 0;}
.item1-4{ background:green;width: 100px;order: 3;}
.item1-5{ background:cyan;width: 100px;order: 2;}
.item1-6{ background:blue;width: 100px;order: 1;}
order分别设置为 6 5 4 0 3 2 1
2. flex-grow属性
flex-grow: ;
:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
按照设置数字比例进行拉伸,默认为0,即如果存在剩余空间,也不放大。
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
}
/*.item{width: 100px; height: 200px;}*/
.item1-1{ background:red;height: 100px; flex-grow:1}
.item1-2{ background:orange;height: auto;flex-grow:5}
.item1-3{ background:yellow;flex-grow:1}
.item1-4{ background:green;flex-grow:1}
.item1-5{ background:cyan;flex-grow:1}
.item1-6{ background:blue;flex-grow:1}
flex-grow 属性设定分别为 1 5 1 1 1 1
3. flex-shrink属性
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认为1,即如果空间不足,该项目将缩小。负值对该属性无效
flex-shrink: ;
:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。
如果设置为0不进行收缩,值越大收缩越多。
flex-shrink 设置分别为 1 0 1 1 1 1 1 1
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
}
.item{width: 400px; height: 200px;flex-shrink:1}
.item1-1{ background:red;height: 100px; }
.item1-2{ background:orange;height: auto;flex-shrink:2}
.item1-3{ background:yellow;flex-shrink:3}
.item1-4{ background:green;}
.item1-5{ background:cyan;}
.item1-6{ background:blue;}
flex-shrink 设置分别为 1 2 3 1 1 1 值越大缩放比例越大
4. flex-basis属性
flex-basis: | auto;
:一个长度单位或者一个百分比,规定元素的初始长度。
auto:默认值。长度等于元素的长度。如果该项目未指定长度,则长度将根据内容决定。
如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。
默认值为auto,即项目的本来大小。也可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间
5. flex属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
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属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
改变子元素的align-items
弹性盒子方向
.container{
width: 1002px; height: 302px; border:1px solid;
display: flex;
align-items:flex-start;
/*
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
stretch(默认值):如果项未设置高度或设为auto,将占满整个容器的高度。
baseline: 项目的第一行文字的基线对齐。
* */
}
/*.item{width: 100px; height: 200px;}*/
.item1-1{ background:red;height: 100px;width: 100px;
padding: 20px;}
.item1-2{ background:orange;width: 300px;height: auto;}
.item1-3{ background:yellow;width: 100px;}
.item1-4{ background:green;width: 100px;}
.item1-5{ background:cyan;width: 100px;}
.item1-6{ background:blue;width: 100px; align-self:flex-end}
align-items:flex-start; align-self:flex-end;
html弹性盒子布局,div+css3弹性盒子(flex box)布局相关推荐
- html弹性盒子垂直排列,css3弹性盒子布局
css3弹性盒子布局 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式. 引入弹性盒布局模型的目的是 ...
- 响应式布局:CSS3弹性盒flex布局模型
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و 页面布局一直都是web应用样式设计的重点 我们传统的布局方式都是基于盒模型的 利用display.position.float来 ...
- css3 flex布局九宫格,css3最全flex布局结构整理
一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联想到 Word 文档排版中用到的的左 ...
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- CSS3弹性盒布局方式
CSS3弹性盒子布局方式 CSS3 弹性盒子(Flex Box)是一种适应不同屏幕大小及设备类型的一种布局方式.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分 ...
- 从上往下 流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念 最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
- css3弹性盒子、媒体查询、多列布局
css3 一.弹性盒子 <head lang="en"><meta name="viewport" content="width=d ...
- CSS3 - 使用弹性盒子(Flex Box)实现完美居中、栅格系统及响应式布局
CSS3弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的 ...
- CSS3弹性盒子布局
弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方式.引入弹性盒 ...
最新文章
- profiler 对表跟踪
- 【总结】只需5步,给所有想入行人工智能/深度学习的新手们准备的资料
- c语言 字符串 url,如何对URL字符串进行百分号编码
- while嵌套注意事项(九九星号代码
- python的numpy教程_Python入门教程(一):初识Numpy
- Linux基础(13)文本查找利器find的使用方法
- php修改学生信息代码_PHP连接MySQL数据库添加图书功能
- Intellij IDEA创建包(package)问题解决方案
- UFO报表另存为Excel提示:可能没有正确安装Excel
- Linux 硬盘故障修复
- rational rose 启动选择_Rational Rose 附使用教程
- 你必须了解的支撑研究蛋白质组学的3大技术
- java实现分数四则运算
- 【传感器模块】 HC-SR501 人体红外感应模块 热释电 红外传感器
- System.currentTimeMillis()和System.nanoTime()的区别
- STM32的串口中断详解
- thumbnailator给图片添加水印
- stata豪斯曼检验报错
- 数据结构复习(五)——树和二叉树
- Mac/Win上运行Switch游戏(亲测可用)
热门文章
- 夯实基础——P1830 轰炸III
- AttributeError: module ‘tensorflow_core.compat.v1‘ has no attribute ‘contrib‘
- uni-app 二维码生成器
- 微信公众号平台的现状及发展前景的分析(十八)
- Android OTG-HID的连接与通讯
- USB OTG连接方式
- 文科生学计算机有前途吗,文科生学习计算机有难度吗?计算机的前景如何?
- fing网络扫描仪android,Fing网络扫描仪
- 最迷幻的办法解决SpringBoot访问static文件夹下的静态资源
- 『推箱子』苏晓辉の转专业面试作品 · 纪念品