网站建设标书,如何制作自己的作品集,京东商城 网站建设,网站开发 百度编辑器我想大家在做布局的时候#xff0c;没接触flex布局之前#xff0c;大家都是用浮动来布局的#xff0c;但现在我们接触了flex布局之后#xff0c;我只能说#xff1a;“真香”。让我为大家介绍一下弹性盒子模型吧#xff01; Flexible Box 弹性盒子 在我们使用弹性盒子时没接触flex布局之前大家都是用浮动来布局的但现在我们接触了flex布局之后我只能说“真香”。让我为大家介绍一下弹性盒子模型吧 Flexible Box 弹性盒子 在我们使用弹性盒子时我们需要给父级添加display:flex; 这是没给父级添加display:flex;时的样子
这是给父级添加了display:flex;时的样子 大家看这是不是浮动该做的事情呀我们flex也可以做而且可以更简单更轻松的完成我们的布局让我为大家介绍一下吧 写在父级上常用的属性
一.父级添加
1.displayflex(给父级添加)
不添加这个是开启不了flex布局的flex的其他方法全部没有效果 .father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 400px;background-color: orange;}.father .son {font-size: 20px;width: 100px;height: 100px;}2.flex-direction(给父级添加)
改变主轴方向
属性值描述row默认值主轴水平子元素从左到右排列row-reverse主轴水平子元素从右到左排列column主轴垂直子元素从上到下排列column-reverse主轴垂直子元素从下到上排列
效果图 row: row-reverse:
column:
column-reverse:
flex-direction代码总结
!DOCTYPE html
html langen
headmeta charsetUTF-8titledisplay/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;flex-direction: row; /* 默认值 *//* flex-direction: row-reverse; *//* flex-direction: column; *//* flex-direction: column-reverse; */}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;}.father .son:nth-child(2){background-color: red;}.father .son:nth-child(3){background-color: yellow;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html3.justify-content(给父级添加)
设置主轴上子元素的对齐方式
属性值描述flex-start默认值所有子元素与主轴起始线对齐center所有子元素与主轴中心线对齐flex-end所有子元素与主轴终止线对齐space-around平均分配剩余空间但左右缝隙是中间的一半space-between先紧贴两边再平分剩余空间space-evenly平均分配空间
效果图 flex-start center flex-end space-around space-between space-evenly flex-direction代码总结
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejustify-content/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;justify-content: flex-start;/* justify-content: center; *//* justify-content: flex-end; *//* justify-content: space-around; *//* justify-content: space-between; *//* justify-content: space-evenly; */}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;}.father .son:nth-child(2){background-color: red;}.father .son:nth-child(3){background-color: yellow;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html4.flex-wrap(给父级添加)
设置子元素是否换行
属性值描述nowrap默认值默认不换行在一行显示wrap换行显示第一行顶在上方wrap-reverse换行显示第一行顶在下方
效果图 nowrap
wrap wrap-reverse flex-wrap代码总结
!DOCTYPE html
html langen
headmeta charsetUTF-8titleflex-wrap/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;flex-wrap: nowrap;/* flex-wrap: wrap; *//* flex-wrap: wrap-reverse; */}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 150px;height: 100px;}.father .son:nth-child(1){background-color: pink;}.father .son:nth-child(2){background-color: red;}.father .son:nth-child(3){background-color: yellow;}.father .son:nth-child(4){background-color: hotpink;}.father .son:nth-child(5){background-color: blue;}.father .son:nth-child(6){background-color: green;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/divdiv classson4/divdiv classson5/divdiv classson6/div/div
/body
/html5.align-items(给父级添加)
设置侧轴上的子元素排列方式(单行) **特别注意**这是单行的情况下
属性值描述stretch默认值如果子级没高度各行将会伸展以占用剩余的空间flex-start所有子元素与侧轴起始线对齐flex-end所有子元素与侧轴中终止线对齐center所有子元素与侧轴中心线对齐
效果图 stretch(当没给子级高度时) flex-start flex-end center align-items
!DOCTYPE html
html langen
headmeta charsetUTF-8titlealign-items/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;/* align-items: stretch; */align-items: flex-start;/* align-items: flex-end; *//* align-items: center; */}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 150px;height: 100px;}.father .son:nth-child(1){background-color: pink;}.father .son:nth-child(2){background-color: red;}.father .son:nth-child(3){background-color: yellow;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html6.align-content(给父级添加)
设置侧轴上子元素的排列方式(多行) 需要与flex-wrap一起使用 注意多行的情况下修改 flex-wrap 属性的行为类似 align-items, 但不是设置子元素对齐而是设置行对齐
属性值描述stretch默认值如果子级没高度各行将会伸展以占用剩余的空间flex-start所有子元素与侧轴起始线对齐flex-end所有子元素与侧轴中终止线对齐center所有子元素与侧轴中心线对齐space-around平均分配剩余空间但上下缝隙是中间的一半space-between先紧贴两边再平分剩余空间space-evenly平均分配空间
效果图 stretch flex-start flex-end center
space-around space-between space-evenly align-content
!DOCTYPE html
html langen
headmeta charsetUTF-8titlealign-content/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;flex-wrap: wrap;/* align-content: stretch; */align-content: flex-start;/* align-content: flex-end; *//* align-content: center; *//* align-content: space-around; *//* align-content: space-between; *//* align-content: space-evenly; */}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 150px;height: 100px;}.father .son:nth-child(1){background-color: pink;}.father .son:nth-child(2){background-color: red;}.father .son:nth-child(3){background-color: yellow;}.father .son:nth-child(4){background-color: hotpink;}.father .son:nth-child(5){background-color: blue;}.father .son:nth-child(6){background-color: green;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/divdiv classson4/divdiv classson5/divdiv classson6/div/div
/body
/html7.flex-flow(给父级添加)
复合属性把设置主轴方向和是否换行(换列)简写 语法flex-flow 主轴方向 是否换行 主轴方向与是否换行请看2与4的介绍
二.子级添加
1.align-self
用于设置弹性元素自身在侧轴纵轴方向上的对齐方式。 注给子元素设置
属性值描述auto默认值计算值为元素的父元素的’align-items’值如果其没有父元素则计算值为’stretch’。flex-start弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴起始边界flex-end弹性盒子元素的侧轴纵轴起始位置的边界紧靠住该行的侧轴结束边界center弹性盒子元素在该行的侧轴纵轴上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸则会向两个方向溢出相同的长度)stretch在交叉轴方向上拉伸baseline如弹性盒子元素的行内轴与侧轴为同一条则该值与’flex-start’等效。其它情况下该值将参与基线对齐
效果图 auto flex-start
flex-end
center
align-self代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleflex-self/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;}.father .son:nth-child(2){background-color: red;align-self: auto;/* align-self: flex-start; *//* align-self: flex-end; *//* align-self: center; *//* align-self: stretch; *//* align-self: baseline; */}.father .son:nth-child(3){background-color: yellow;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html2.order(子级添加)
弹性子元素排序用整数值来定义排列顺序数值小的排在最前面可以 为负值属性设置弹性容器内弹性子元素属性 !DOCTYPE html
html langen
headmeta charsetUTF-8titleorder/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;order: 1;}.father .son:nth-child(2){background-color: red;order: 0;}.father .son:nth-child(3){background-color: yellow;order: -1;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html3.flex-grow
用来分配剩余空间需要主轴上有剩余空间
属性值描述initial默认值与0一样0不放大也不缩小number正数flex-grow每一份都为1时 但第一个元素为1第二个为2第三个为3时 flex-grow代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleflex-grow/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;flex-grow: 1;}.father .son:nth-child(2){background-color: red;flex-grow: 2;}.father .son:nth-child(3){background-color: yellow;flex-grow: 3;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html4.flex-base
会覆盖之前的width宽度但该属性会被项目的min-width/min-height值覆盖 会自动计算主轴是否有多余空间
属性值描述auto默认值不发生改变%百分比像素px
我们给son1设置flex-base如果3个元素的总宽度超出了父级son1还会继续变宽吗 会继续变宽这是伸缩盒模型的缩当我们宽度超出父级的时候会缩回让他们的宽度总和为600px
!DOCTYPE html
html langen
headmeta charsetUTF-8titleflex-base/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;flex-basis: 800px;}.father .son:nth-child(2){background-color: red;}.father .son:nth-child(3){background-color: yellow;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html6.flex-shrink
flex-shrink 主要处理当 flex 容器空间不足时候单个元素的收缩比例当超出父级宽度时每个子元素原本宽度减去按比例分配的值其剩余值为实际宽度 当前子元素宽度超出了主轴空间多少: 子元素的总宽度 - 父级的宽度 需要消化的宽度 子元素子元素的收缩因子之和: n 每一份就是: 需要消化的宽度/n f 每一个项目: 子元素的宽度- shrink的份数 * f 缩放的宽度 flex-shrink代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleflex-base/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;width: 420px;flex-shrink: 1;}.father .son:nth-child(2){background-color: red;flex-shrink: 1;}.father .son:nth-child(3){background-color: yellow;flex-shrink: 1;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html7.flex
项目缩放的简写可以简写flex-grow flex-base flex-shrink 语法: flex: flex-grow flex-shrink flex-basis 推荐使用flex方法 常用flex1对应flex: 1 1 auto
!DOCTYPE html
html langen
headmeta charsetUTF-8titleflex/titlestyle.father {/* 给父级宽高开启弹性盒子布局 */display: flex;width: 600px;height: 300px;background-color: orange;}.father .son {text-align: center;line-height: 100px;font-size: 30px;width: 100px;height: 100px;}.father .son:nth-child(1){background-color: pink;flex: 1;}.father .son:nth-child(2){background-color: red;flex: 1;}.father .son:nth-child(3){background-color: yellow;flex: 1;}/style
/head
bodydiv classfatherdiv classson1/divdiv classson2/divdiv classson3/div/div
/body
/html感谢大家阅读如有不对的地方可以向我提出感谢大家
