专做化妆品网站,今网科技网站建设,看网站建设公司的网站案例,蒙晟建设有限公司官方网站CSS:Flexible Box弹性盒子布局
一、flex布局原理
flex是flexible Box的缩写,意为 ”弹性布局“#xff0c;用来为盒状模型提供最大的灵活性#xff0c;任何一个容器都可以指定为flex布局。 当我们的父盒子设置为flex布局之后#xff0c;子元素的 float 、clear 和 vert…CSS:Flexible Box弹性盒子布局
一、flex布局原理
flex是flexible Box的缩写,意为 ”弹性布局“用来为盒状模型提供最大的灵活性任何一个容器都可以指定为flex布局。 当我们的父盒子设置为flex布局之后子元素的 float 、clear 和 vertical-align 属性将会失效。 伸缩布局 弹性布局 伸缩盒布局 弹性盒布局 flex布局 采用了 Flex布局的元素称为 **Flex容器**flex container简称 ”容器“。它的所有子元素自动成为容器成员称为**Flex项目**flex item简称”项目“。 **flex布局原理**通过给父盒子添加 flex 属性来控制子盒子的位置和排列方式。
二、flex布局父项常见属性
2.1 常见父项属性
以下由6个属性是对父元素设置的
flex-direction设置主轴的方向jusify-content设置主轴上的子元素排列方式flex-wrap设置子元素是否换行align-content: 设置侧轴上的子元素的排列方式(多行)align-items设置侧轴上的子元素排列方式(单行)flex-flow: 复合属性相当于同时设置了flex-direction 和 flex-wrap
2.2 flex-direction 属性
2.2.1主轴与侧轴
在flex布局中是分为主轴和侧轴两个方向同样的叫法有行和列、x轴和y轴 默认主轴方向就是x轴反向水平向右 默认侧轴方向就是y轴方向水平向下
2.2.2 属性值
flex-direction属性决定主轴的方向即项目的排列方向
注意主轴和侧轴是会变化的就看flex-direction设置谁为主轴剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。
属性值说明row默认值从左到右row-reverse从右到左column从上到下column-reverse从下到上
!DOCTYPE html
htmlheadmeta charsetutf-8titleflex布局/title/headbodydivspan1/spanspan2/spanspan3/span/div/body
/htmlstylediv{width: 800px;height: 300px;background-color: pink;/* 给父级添加flex属性 */display: flex;/* 默认的主轴是x轴 row y轴就是侧轴了 元素是跟着主轴来排列的 *//* flex-direction: row-reverse; *//* 将主轴设置为y轴,那么x轴就变为侧轴,元素是跟着主轴来排列的 */flex-direction: column;}div span{width: 150px;height: 100px;background-color: purple;}
/style界面展示效果
2.3 justify-content 属性
justify-content属性是设置 主轴上的子元素对齐方式定义了项目在主轴上的对齐方式
注意使用这个属性之前一定要确定号主轴是x轴还是y轴。
属性值说明flex-start默认值 从头部开始如果主轴是x轴则从左到右flex-end从尾部开始排列center在著有剧中对齐如果主轴是x轴 则水平居中space-around平均分剩余空间 左边空间右边空间的方式 space-between先两边贴边 在分剩余空间 重要
2.4 flex-wrap属性
当下面这种情况出现时父容器的长度在主轴上无法全部容下所有的项目时子元素项目的主轴大小会被无线的缩小子项目不会自动进行换行。就需要通过 flex-wrap属性来处理换行操作。
bodydivspan1/spanspan2/spanspan3/span!-- span4/span --/div/bodystylediv{width: 600px;height: 400px;background-color: pink;display: flex; //父容器flex布局flex-direction: row; //主轴方向}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外边距}/style 当添加多个 span /span 标签时子项目在主轴上的宽度会被无线收缩而不会自动换行。 flex-wrap设置子元素是否换行flex布局中的子元素是默认不换行项目都排在一条线又称为”轴线“上如果装不开会缩小子元素的主轴上的大小。
属性值说明nowrap默认值不换行wrap换行
bodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/span/div/bodystylediv{width: 600px;height: 400px;background-color: pink;display: flex; /* //父容器flex布局 */flex-direction: row; /* //主轴方向 *//* justify-content:space-around; */flex-wrap: wrap;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外边距}/style换行后的效果
2.5 align-items属性
设置侧轴上的子元素排列方式单行
该属性是控制子项在侧轴默认是y轴上的排列方式在子项为单项的时候使用
属性值说明flex-start默认值 从上到下flex-end从下到上center挤在一起居中垂直居中stretch拉伸子项目没有设置高度的情况
bodydivspan1/spanspan2/spanspan3/span/div
/body
stylediv{width: 600px;height: 400px;background-color: pink;display: flex; /* 父容器flex布局 */flex-direction: row; /* //主轴方向x */justify-content: center;align-items: center;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外边距}
/style
2.6 align-content属性
设置轴上的子元素的排列方式多行设置子项目在侧轴上的排列方式并且只能用于子项目出现了换行的情况多行。在单行下没有效果
属性值说明flex-start默认值从侧轴的头部开始排列flex-end从侧轴的尾部开始排列center在侧轴的中间显示space-around子项在侧轴平分剩余空间space-between子项在侧轴上先分布到两头在平凡甚于空间stretch设置子元素高度平分父元素高度 align-items 和 align-content 区别: align-items适应单行情况下只有上对齐、下对齐、居中和拉伸。align-content适用与多行的情况下(多行)单行无效。可以设置 上对齐、下对齐、居中对齐、拉伸 以及 平分剩余空间等操作单行找 align-items 多行找 align-content bodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/spanspan6/span/div
/body
stylediv{width: 600px;height: 400px;background-color: pink;display: flex; /* 父容器flex布局 */flex-direction: row; /* //主轴方向x */justify-content: center;/* align-items: center; 只是对单行起效 */flex-wrap: wrap;align-content: center;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外边距}2.7 flex-flow
flex-flow 属性是我们 flex-direction (主轴方向和 flex-wrap(是否换行) 属性的符合属性。
bodydivspan1/spanspan2/spanspan3/spanspan4/spanspan5/spanspan6/span/div
/body
stylediv{width: 600px;height: 400px;background-color: pink;display: flex; /* 父容器flex布局 */flex-flow: row wrap;align-content: center;}div span{width: 150px;height: 100px;background-color: purple;color: aliceblue;margin: 10px; //外边距}
/style三、flex布局中子项常用属性
flex子项中常见属性主要有一下三个
flex 子项占的份数align-self 控制子项自己在侧轴的排列方式order 定义子项的排列顺序前后顺序
3.1 flex 属性:
定义子项目来分配甚于空间用flex来表示占多少份。 .item{ flex : number ; /* default 0 */ } 案例一
bodysectiondiv1/divdiv2/divdiv3/div/section
/body
stylesection {display: flex;width: 60%;height: 150px;background-color: pink;margin: 0 auto; //居中}section div:nth-child(1){width: 100px;height: 150px;background-color: red;}section div:nth-child(3){width: 100px;height: 150px;background-color: blue;}section div:nth-child(2){background-color: green;flex: 1;}
/style展示效果 案例二 bodypspan1/spanspan2/spanspan3/span/p
/body
stylep {display: flex;width: 60%;height: 150px;background-color: pink;margin: 100px auto; //居中}p span {flex:1;background-color: chocolate;margin: 10px;}
/style3.2 algin-self 属性
align-self 控制子项自己在侧轴上的排列方式。允许单个项目有与其他项目不一样的对齐方式。可覆盖 align-items属性。默认值为auto表示继承父项目的 align-items 属性如果没有父元素同等与stretch。
bodypspan1/spanspan2/spanspan3/span/p
/body
stylep {display: flex;width: 80%;height: 300px;background-color: pink;margin: 100px auto; /* 居中 *//* align-items:flex-end; z只想让3号盒子下对齐*/}p span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}p span:nth-child(3){/* 只改变3号盒子的对齐方式 */align-self: flex-end; }
/style3.2 order 属性
定义项目的排列顺序数值越小排列越靠前默认为0。
注意与 z-index 不一样。
bodypspan1/spanspan2/spanspan3/span/p
/body
stylep {display: flex;width: 80%;height: 300px;background-color: pink;margin: 100px auto; /* 居中 *//* align-items:flex-end; z只想让3号盒子下对齐*/}p span {width: 150px;height: 100px;background-color: purple;margin-right: 5px;}p span:nth-child(3){/* 只改变3号盒子的对齐方式 */align-self: flex-end; /* 默认是0-1更小所有在前面 */order: -1;}
/style
