CSS弹性盒子模型Flex
来源:互联网 发布:三菱plcq系列编程手册 编辑:程序博客网 时间:2024/05/01 10:14
首先讲解将内层盒子显示到外层盒子中心 使用弹性盒子模式实现
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>弹性盒子简单用力模型</title><style type="text/css">#box1{ width: 200px; height: 200px;background-color: #FF0000;/*1.将容器设置为弹性盒子*/display: flex;/*2设置水平居中*/justify-content: center;/*设置为垂直居中*/align-items: center; }#box2{ width: 100px; height: 100px; background-color: #0000FF;}</style></head><body><div id="box1"><div id="box2"></div></div></body></html>
flex容器
通过上面的代码,我们能发现:要使用flex布局,需要设计到两层,外面一层叫做Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。下面是一个flex布局的基本概念介绍:
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。
大致了解了之后,主要还是怎么用。flex容器有以下六个属性:
1. flex-direction 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content
下面逐个介绍一下这六个属性的作用:
1、flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-direction: row | row-reverse | column | column-reverse;
四个值分别代表:
- row(默认值):主轴为水平方向,起点在左端。 - row-reverse:主轴为水平方向,起点在右端。 - column:主轴为垂直方向,起点在上沿。 - column-reverse:主轴为垂直方向,起点在下沿。
效果分别对应如下:
2、flex-wrap
flex-wrap属性定义,如果一条轴线排不下,如何换行。有三个属性值,默认情况下是wrap
flex-wrap: nowrap | wrap | wrap-reverse;
分别表示不换行、换行以及反转换行,效果分别如下:
3、flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。这里就不再具体测试。
4、justify-content
justify-content属性定义了项目在主轴上(即相当于X轴)的对齐方式。一共有五个属性值:
justify-content: flex-start | flex-end | center | space-between | space-around;
分别表示:左对齐、右对齐、居中、两端对齐、每个项目两侧的间隔相等。以下是对应的效果:
5、align-items
align-items属性定义项目在交叉轴上(即Y轴上)如何对齐。也有五个属性值:
align-items: flex-start | flex-end | center | baseline | stretch;
分表表示:上对齐、下对齐、居中对齐、项目的第一行文字的基线对齐、如果项目未设置高度或设为auto,将占满整个容器的高度(默认值)。
下面是对应的效果图:
6、align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。该属性定义多跟轴线在Y轴上的对齐方式,与align-items有点类似。其有以下六个属性值:
- flex-start:与交叉轴的起点对齐。 - flex-end:与交叉轴的终点对齐。 - center:与交叉轴的中点对齐。 - space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 - space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 - stretch(默认值):轴线占满整个交叉轴。
flex item
介绍完了flex容器,介绍就要介绍容器里的成员了,Flex项目(flex item),简称”项目”。这里需要之一的是:设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
flex项目有以下六个属性:
1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex 6. align-self
以下对每一个分别进行介绍:
1、order
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。有了这个属性,可以调整在HTML中出现的顺序。
order: <integer>;
2、flex-grow
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
flex-grow: <number>; /* default 0 */
如果一个项目的flex-grow属性为2,另一个项目都为1,则前者占据的剩余空间将比后一项多一倍。如下所示:
3、flex-shrink
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
flex-shrink: <number>; /* default 1 */
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
4、flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。类似于设置了width属性。
5、flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
6、align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
上面六个取值中,除了auto,其他值与align-items属性完全一致。这里就不一一介绍了。
flex的应用
利用flex,我们可以完成很多布局,而且不需要太多的代码。开头的圣杯布局就是一种典型的示例,下面我们利用flex来实现流式布局,并且加上简单的媒体查询,使其在移动端和PC显示结构不一样,程序如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>flex实现流式布局</title> <style type="text/css"> *{ margin: 0; padding:0;} .container{ margin: 20px 20px; padding: 10px 10px; display: flex; flex-wrap:wrap; border: 1px solid #ADAAAA; } .item{ flex:0 0 40%; height: 100px; margin:20px 5%; box-sizing: border-box; border: 1px solid red; } @media (min-width:960px){ .item{ flex:0 0 20%; height: 100px; margin:20px 2.5%; box-sizing: border-box; border: 1px solid red; } } </style></head><body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></body></html>
在PC端显示结果如下:
在移动端显示效果如下:
- CSS弹性盒子模型Flex
- 弹性盒子模型(flex)
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- 弹性盒子模型 box-flex
- html flex弹性盒子模型
- CSS3: box-flex (弹性盒子模型)
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型display:flex
- 弹性盒子模型属性之flex-grow
- 弹性盒子模型属性之flex-shrink
- 用html制作一个简单的五环
- CodeForces
- [数位DP]Hdu 6148——Valley Number
- CodeVS1267 老鼠的旅行 解题报告【棋盘型DP】
- Mysql中的CONCAT、GROUP_CONCAT使用示例
- CSS弹性盒子模型Flex
- 图片读取格式
- JS小知识
- 解决火狐兼容性问题
- 面向对象基础知识(3)--对象生存周期
- 伪元素使用
- Git基本操作(二)
- 360发“神秘微博”,要涉足汽车制造了?
- matlab2c使用c++实现matlab函数系列教程-pascal函数