广西区建设厅网站,酒泉网站seo,wordpress 域名绑定后 手机,丽江建设公司网站玄子Share-CSS3 弹性布局知识手册
Flexbox Layout#xff08;弹性盒布局#xff09;是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布
主轴和交叉轴
使用弹性布局#xff0c;最重要的一个概念就是主轴与…玄子Share-CSS3 弹性布局知识手册
Flexbox Layout弹性盒布局是一种在 CSS 中用于设计复杂布局结构的模型。它提供了更加高效、简便的方式来对容器内的子元素进行排列、对齐和分布
主轴和交叉轴
使用弹性布局最重要的一个概念就是主轴与交叉轴副轴侧轴主轴由flex-direction定义另一根轴垂直于它
主轴Main Axis弹性容器的主要方向可以是水平方向或垂直方向交叉轴Cross Axis与主轴垂直的轴线如果主轴是水平方向那么交叉轴就是垂直方向反之亦然 这里一定不要主观认为主轴就是横向水平交叉轴就是纵向的垂直主轴是水平还是垂直排列以及justify-content与align-items等样式的排列方向都是由主轴方向flex-direction来定义的 弹性容器属性
弹性容器属性设置在需要开启弹性布局的容器中也就是父级容器
display定义弹性容器表现形式 flex块级弹性容器inline-flex行内弹性容器 flex-direction定义主轴的排列方向 row主轴排列方向为行排列横向默认值row-reverse主轴排列方向为行排列横向并翻转左右顺序column主轴排列方向为列排列纵向column-reverse主轴排列方向为列排列纵向并翻转上下顺序 flex-wrap定义子容器宽度在超出父容器宽度时子容器是否自动换行 nowrap子容器在超出父容器宽度时不允许自动换行默认值wrap子容器在超出父容器宽度时允许自动换行wrap-reverse子容器在超出父容器宽度时允许自动换行并翻转两行顺序 flex-flowflex-direction 和 flex-wrap 的简写形式 row只写单个 flex-direction 值表示排列方式与关键词一致不换行wrap只写单个 flex-wrap值表示排列方式为横向排列换行行为与关键词一致flex-flow: row nowrap主轴为行排列子容器不换行flex-flow: column wrap主轴为列排列子容器允许换行flex-flow: row-reverse wrap-reverse主轴为行排列并反向排列子容器允许换行且反向排列为保证代码的易读性在编写代码时推荐使用拆分形式书写 justify-content定义子容器在主轴上的对齐方式 flex-start子容器向主轴开始位置对齐flex-end子容器向主轴结束位置对齐center子容器在主轴上居中对齐space-between子容器在主轴上平均分布首尾没有空隙space-around子容器在主轴上平均分布每个子容器两侧有空隙space-evenly子容器在主轴上平均分布每个子容器两侧和首尾都有空隙 align-items 定义子容器在交叉轴上的对齐方式 flex-start子容器向交叉轴开始位置对齐flex-end子容器向交叉轴结束位置对齐center子容器在交叉轴上居中对齐baseline子容器的基线对齐stretch子容器在交叉轴上拉伸以适应容器高度 align-content 定义子容器在多轴多行上的对齐方式此样式只在开启 flex-wrap 自动换行时生效 flex-start子容器在多轴上向交叉轴开始位置对齐lex-end子容器在多轴上向交叉轴结束位置对齐center子容器在多轴上居中对齐space-between子容器在多轴上平均分布首尾没有空隙space-around子容器在多轴上平均分布每个子容器两侧有空隙space-evenly子容器在多轴上平均分布每个子容器两侧和首尾都有空隙stretch子容器在多轴上拉伸以适应容器高度
弹性项目属性
弹性项目属性设置在已经开启弹性布局的弹性项目中也就是子级容器
order定义项目的排列顺序 正整数 定义项目的排列顺序数值越小排列越靠前负整数 同上数值越小排列越靠前 flex-grow定义项目在分配多余空间时的放大比例 0项目在空间充足时不会放大默认值数值定义项目在分配多余空间时的相对增长比例数值越大分配到的空间越多 flex-shrink定义项目在空间不足时的缩小比例 1项目在空间不足时会按照相等的比例缩小默认值数值定义项目在空间不足时的相对缩小比例数值越大缩小得越多 flex-basis定义项目在分配多余空间之前的基准值 auot项目在分配多余空间之前自动调整基准大小默认值长度值或百分比指定项目在分配多余空间之前的基准大小 flexflex-grow、flex-shrink 和 flex-basis 的简写形式 0 1 auto等于flex-grow0flex-shrink1flex-basisauto项目在分配多余空间时不会相对增长项目在空间不足时会相对收缩默认值1 等于flex-grow1flex-shrink1flex-basis0%项目会在分配多余空间时会相对增长空间不足时会相对收缩200px 等于flex-grow1flex-shrink1flex-basis200px项目在分配多余空间时会相对增长空间不足时会相对收缩默认大小200pxnone等于flex-grow0flex-shrink0flex-basisauto项目在分配多余空间时不会相对增长项目在空间不足时不会相对收缩auto 等于flex-grow1flex-shrink1flex-basisauto项目会在分配多余空间时会相对增长空间不足时会相对收缩在实际开发中建议优先使用 Flex 属性这样写有利于浏览器渲染 align-self设置单个子元素在交叉轴上的对齐方式覆盖父容器的 align-items 属性 flex-start单个项目向交叉轴开始位置对齐flex-end单个项目向交叉轴结束位置对齐center单个项目在交叉轴上居中对齐baseline单个项目的基线对齐stretch单个项目在交叉轴上拉伸以适应容器高度
演示示例模板
下面我将使用这个示例模板来进行弹性布局的效果演示后续示例仅展示关键代码
#app定义了一个页面底板并使用弹性布局设置在页面中央位置仅用于布局无意义.container定义了一个弹性容器它的子元素.item会沿着主轴横向排列使用容器右下角的按钮可快捷调整容器大小.item定义了.container子容器的样式用于演示示例
!DOCTYPE html
html langen
headmeta charsetUTF-8title玄子Share-弹性布局演示案例/titlestyle#app {width: 90vw;height: 90vh;margin: 0 auto;padding: 20px;background-color: #EAEAEA;display: flex;flex-direction: column;align-items: center;/*以上为演示案例的底板样式仅用于布局无意义*/}.container {width: 600px;height: 300px;background-color: darkgray;overflow: auto;resize: both;/*通过 resize 样式自由调整演示容器大小*//*Flex*/display: flex;}.item {width: 100px;height: 100px;margin: 5px;text-align: center;line-height: 100px;border: 1px solid blue;background-color: turquoise;/*Flex*/}/style
/head
body
div idapph1玄子Share-弹性布局演示案例/h1div classcontainerdiv classitem1/divdiv classitem2/divdiv classitem3/divdiv classitem4/divdiv classitem5/div/div
/div
/body
/html通过调整.container的尺寸可以观察到当父级容器空间不足时子元素的宽度会被挤压以容下子元素 弹性容器演示
flex-direction
.container {/*Flex*/display: flex;flex-direction: row;
}flex-direction: row可以看到这个属性的效果和默认只写一个display: flex的效果是一致的子元素从左到右依次排列默认效果 .container {/*Flex*/display: flex;flex-direction: row-reverse;
}flex-direction: row-reverse这个属性的效果和flex-direction: row的效果是相反的子元素从右到左依次排列并翻转子元素的顺序 .container {height: 600px;/*Flex*/display: flex;flex-direction: column;
}flex-direction: column这个属性的效果为子元素从上到下依次排列 .container {height: 600px;/*Flex*/display: flex;flex-direction: row-reverse;
}flex-direction: column-reverse这个属性的效果和flex-direction: column的效果是相反的子元素从下到上依次排列并翻转子元素的顺序 flex-wrap
.container {/*Flex*/display: flex;flex-direction: row;flex-wrap: nowrap;
}flex-wrap: nowrap这个属性的效果与只写一个display: flex效果一致如果父容器宽度不足则会挤压子元素宽度默认效果 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;
}flex-wrap: wrap这个属性的效果为当父容器宽度不足时子元素会自动换行如果父容器宽度实在不足则会挤压子元素宽度 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap-reverse;
}flex-wrap: wrap-reverse这个属性的效果为当父容器宽度不足时子元素会自动换行但换行效果是反向的即从下到上换行 flex-flow
.container {/*Flex*/display: flex;flex-flow: row wrap;
}flex-flow: column wrap这个属性是flex-direction与flex-wrap的简写形式当前样式表示主轴横向排列自动换行 .container {/*Flex*/display: flex;flex-flow: row wrap;
}flex-flow: column wrap当前样式表示主轴纵向排列自动换行 .container {/*Flex*/display: flex;flex-flow: row;
}flex-flow: row若只写一个flex-direction的关键字则遵守flex-direction关键字的规则 .container {/*Flex*/display: flex;flex-flow: wrap;
}flex-flow: wrap若只写一个flex-wrap的关键字则flex-direction排列方向为默认横向排列换行行为遵守flex-wrap关键字的规则 justify-content
.container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;
}justify-content: flex-start这个属性的效果与flex-directionrow的默认效果一致子元素沿主轴方向依次排列默认效果 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-end;
}justify-content: flex-end这个属性的效果与justify-content: flex-start的效果相反子元素沿主轴反方向依次排列 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;
}justify-content: center这个属性的效果为子元素沿主轴方向居中对齐并依次排列 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;
}justify-content: space-between这个属性的效果为子元素沿主轴方向两端子元素对齐边距中间子元素等量分配剩余空间依次排列 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-around;
}justify-content: space-around这个属性的效果为子元素沿主轴方向每个子元素等量分配剩余空间到左右两侧依次排列 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;
}justify-content: space-evenly这个属性的效果为子元素沿主轴方向每个子元素等量分配剩余空间依次排列 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;
}设置justify-content与flex-wrap: wrap属性后父容器宽度不足时子容器自动换行换行后子容器排列并遵守justify-content的规则 .container {/*Flex*/display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-evenly;
}flex-direction: column当主轴为纵轴时子元素排列方向依照主轴纵向排列并遵守justify-content的规则主轴纵向等距对齐 align-items
.container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-start;
}外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 align-items: flex-start这个属性的样式与默认效果一致子元素沿侧轴顶部对齐 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: flex-end;
}外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传 align-items: flex-end这个属性的样式与默认效果相反子元素沿侧轴底部对齐 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;
}align-items: center这个属性的样式为子元素沿侧轴中心位置对齐 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: baseline;
}.item:first-child {width: 200px;height: 200px;line-height: 200px;
}align-items: baseline这个属性的样式为子元素沿侧轴中高度最高的子元素的中心位置为基线对齐 .container {/*Flex*/display: flex;flex-direction: column;flex-wrap: wrap;justify-content: space-evenly;align-items: center;
}flex-direction: column当主轴为纵轴时子元素排列方向依照主轴纵向排列并遵守align-items: center的规则侧轴横向居中对齐 align-content
.container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: flex-start;
}align-content: flex-start表示在多轴情况下侧轴的对齐方式为顶部对齐只有在开启flex-wrap换行后才有多轴否则此样式无效 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: center;
}align-content: center表示在多轴情况下侧轴的对齐方式为居中对齐只有在开启flex-wrap换行后才有多轴否则此样式无效 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: flex-end;
}align-content: flex-end表示在多轴情况下侧轴的对齐方式为底部对齐只有在开启flex-wrap换行后才有多轴否则此样式无效 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-around;
}align-content: space-around表示在多轴情况下子元素沿主侧方向每行子元素等量分配剩余空间到侧轴两侧依次排列 .container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-between;
}align-content: space-between表示在多轴情况下子元素沿侧轴方向两端子元素对齐边距中间子元素等量分配剩余空间依次排列
.container {/*Flex*/display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;align-items: center;align-content: space-evenly;
}align-content: space-evenly表示在多轴情况下子元素沿主侧方向每行子元素等量分配剩余空间依次排列 弹性项目演示
order
.container {width: 600px;height: 300px;background-color: darkgray;overflow: auto;resize: both;/*通过 resize 样式自由调整演示容器大小*//*Flex*/display: flex;flex-direction: row;justify-content: space-evenly;align-items: center;
}.item {width: 100px;height: 100px;margin: 5px;text-align: center;line-height: 100px;border: 1px solid blue;background-color: turquoise;/*Flex*/
}.item:nth-of-type(1) {order: 5;
}.item:nth-of-type(5) {order: -1;
}order: 数值单独设置子元素的排列循序按主轴方法计算大小可为负数 flex-grow
.item:nth-of-type(1) {flex-grow: 1;
}flex-grow: 1表示在父容器剩余空间充裕时子元素将自动放大自身以填充剩余空间默认为0及不放大自身 flex-shrink
.item:nth-of-type(1) {flex-shrink: 0;
}flex-shrink: 0表示在父容器剩余空间不足时子元素将不会缩小自身大小以适应空间默认为0及自动缩小自身 flex-basis
.item:nth-of-type(1) {flex-basis: 200px;
}flex-basis: 200px表示项目默认初始大小为200px默认为auto自动调整 flex
.item:nth-of-type(1) {flex: 0 1 auto;
}flex: 0 1 auto表示项目在分配多余空间时不会相对增长项目在空间不足时会相对收缩默认值 .item:nth-of-type(1) {flex: auto;
}flex: auto表示项目会在分配多余空间时会相对增长空间不足时会相对收缩 .item:nth-of-type(1) {flex: none;
}flex: none表示项目在分配多余空间时不会相对增长项目在空间不足时不会相对收缩 .item:nth-of-type(1) {flex: 1;
}flex: 1表示项目会在分配多余空间时会相对增长空间不足时会相对收缩
.item:nth-of-type(1) {flex: 200px;
}flex: 200px表示项目在分配多余空间时会相对增长空间不足时会相对收缩默认大小200px align-self
.item:nth-of-type(1) {align-self: flex-start;
}align-self: flex-start设置单个子元素在侧轴上的对齐方式为顶对齐会覆盖掉父容器的align-items属性 .item:nth-of-type(1) {align-self: flex-start;
}align-self: center设置单个子元素在侧轴上的对齐方式为居中对齐会覆盖掉父容器的align-items属性 .item:nth-of-type(1) {align-self: flex-start;
}align-self: flex-end设置单个子元素在侧轴上的对齐方式为底对齐会覆盖掉父容器的align-items属性 弹性布局案例
后台页面布局 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle* {margin: 0;padding: 0;}#app {margin: 0 auto;width: 100vw;height: 100vh;display: flex;flex-direction: column;}header {width: 100%;height: 10%;background-color: yellow;display: flex;flex-direction: row;/*gap: 5px;*/}header .logo {width: 100px;height: 100px;background-color: blue;}header nav {width: 100px;height: 100px;background-color: blue;}header .user {width: 100px;height: 100px;background-color: blue;margin-left: auto;}section {width: 100%;height: 86%;display: flex;flex-direction: row;overflow: hidden;}section aside {width: 210px;height: 100%;background-color: red;}section main {width: 100%;height: 100%;overflow: auto;}section main .container {background-color: pink;padding: 20px;overflow: auto;}footer {width: 100%;height: 4%;background-color: turquoise;display: flex;justify-content: center;align-items: center;}/style
/head
body
div idappheaderdiv classlogo/divnav/navdiv classuser/div/headersectionaside/asidemaindiv classcontainerdiv stylewidth: 100px; height:1200px;background-color: rgba(153,153,153,0.8)/div/div/main/sectionfootera hrefhttps://www.xuanzishare.com/Copyright © xuanzishare.com. All Rights Reserved./a/footer
/div
/body
/html圣杯页面布局 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle* {margin: 0;padding: 0;}#app {margin: 0 auto;width: 100vw;height: 100vh;display: flex;flex-direction: column;}header, footer {width: 100%;height: 8%;background-color: red;}section {width: 100%;height: 84%;background-color: orange;display: flex;flex-direction: row;}section aside:first-child {width: 10%;height: 100%;background-color: pink;}section main {width: 80%;height: 100%;background-color: green;}section aside:last-child {width: 10%;height: 100%;background-color: pink;}/style
body
div idappheader/headersectionaside/asidemain/mainaside/aside/sectionfooter/footer
/div
/body版心页面布局 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle* {margin: 0;padding: 0;}#app {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;}header {position: fixed;width: 100%;height: 50px;background-color: red;}section {width: 80%;height: 1800px;background-color: orange;}footer {width: 100%;height: 50px;background-color: red;}/style
body
div idappheader/headersection/sectionfooter/footer
/div
/body玄子Share-CSS3 弹性布局知识手册 23.11.30
