网页设计模板免费网站,网页升级无法自动更新,网站空间是虚拟主机吗,标识设计图片Flex 布局是什么#xff1f;
Flex 是 Flexible Box 的缩写#xff0c;意为弹性布局#xff0c;用来为盒状模型提供最大的灵活性。 .box{display: flex;//行内元素也可以使用flex布局//display: inline-flex;
}display: flex; 使元素呈现为块级元素#xff0c;…Flex 布局是什么
Flex 是 Flexible Box 的缩写意为弹性布局用来为盒状模型提供最大的灵活性。 .box{display: flex;//行内元素也可以使用flex布局//display: inline-flex;
}display: flex; 使元素呈现为块级元素占据整行空间除非使用 width 或 height 等属性指定其大小。所有子元素将按照弹性盒子的规则进行布局。display: inline-flex; 使元素呈现为一个行内元素可以与其他元素在同一行上显示。其子元素也将按照弹性盒子的规则进行布局 。 设为 Flex 布局以后子元素的float、clear和vertical-align属性将失效。
flex属性
父元素属性
flex-direction flex-direction属性决定主轴的方向 默认值为row flex-direction: row | row-reverse | column | column-reverse;flex-wrap flex-wrap决定子元素换行 默认值为nowarp flex-wrap: nowrap | warp | wrap-reverseflex-flow flex-direction和flex-wrap的复合属性 ****row nowrap flex-flow: flex-direction | flex-wrapjustify-content属性定义了项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-aroundalign-items属性决定了侧轴上的对齐方式 align-items: flex-start | flex-end | center | baseline | stretch; align-content 多行子容器在交叉轴上的对齐方式,首先的前提是它要满足换行 align-content :flex-start | flex-end | center | space-between | space-around | stretchgap 属性决定了主轴子元素之间的间隔 gap: number
子元素属性
order : 自定义排序,设置order可以按照由小到大进行排列 order: integeralign-self 单独设置子容器的交叉轴排列方式 align-self: flex-start | flex-end | center | baseline | stretchflex-basis表示当子容器不伸缩的状态时,也就是没有设置 flex: 数字的弹性情况下的原始尺寸,默认为auto,item本来的大小 flex-basis: length | autoflex-grow 属性定义项目的放大比例默认为0即如果存在剩余空间也不放大。 flex-grow: numberflex-shrink 定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。flex-shrink: number flex: 属性是flex-grow, flex-shrink 和 flex-basis的复合属性 flex: none | [ flex-grow flex-shrink? || flex-basis ]
flex: 1
flex:1 flex: 1 1 0%; flex:1在父元素尺寸不足的时候会优先最小化内容尺寸。
flex:auto
flex:auto flex: 1 1 auto flex:auto在父元素尺寸不足的时候会优先最大化内容尺寸。
flex: 0
flex:0 flex: 0 1 0%; flex:0 :通常表现为内容最小化宽度,不会充分的分配容器的尺寸。
flex:none
flex:none flex:0 0 auto; flex:none;表示元素的大小由内容决定但是flex-growflex-shrink都是0元素没有弹性通常表现为内容最大化宽度,也许会溢出容器。
所以在日常开发中使用flex:1和 flex:auto比较多
快速练习和使用
CSS3 Flexbox 在线演示
一些布局使用
全屏布局
div classfullscreen
header/header
main/main
footer/footer
/divcss
.fullscreen {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
}
header {
height: 100px;
background-color: yellow;
}
footer {
height: 100px;
background-color: black;
}
main {
flex: 1;
background-color: blue;
}圣杯和双飞翼布局
div classgrail
div classleft/div
div classcenter/div
div classright/div
/div.grail {
display: flex;
height: 100vh;
width: 100vw;
}
.right {
width: 100px;
background-color: blue;
}
.left {
width: 100px;
background-color: red;
}
.center {
flex: 1;
background-color: yellow;
}两列布局(一列固定,一列自适应)
div classtwo-column
div classleft/div
div classright/div
/divcss
.two-column {
display: flex;
height: 100vh;
width: 100vw;
}
.left {
width: 100px;
background-color: blue;
}
.right {
flex: 1;
background-color: red;
}综合案例
![[Pasted image 20240106110443.png]]
div classcontainerdiv classpart1div classpart1-left/divdiv classpart1-right/div/divdiv classpart2div classpart2-top/divdiv classpart2-middle/divdiv classpart2-bottomdiv classpart2-inputBar/divdiv classpart2-inputBtn/div/div/divdiv classpart3div classpart3-top/divdiv classpart3-middlediv classcard/divdiv classcard/divdiv classcard/divdiv classcard/div/divdiv classpart3-bottom/div/div/divcss
body {font-size: small;height: 100vh;width: 100vw;margin: 0;background-color: rgb(216, 216, 216);display: flex;flex-direction: column;justify-content: center;align-items: center;box-sizing: border-box;}div {border: 1px red solid;}.container {display: flex;flex-direction: column;justify-content: space-between;align-items: center;height: 100vh;width: 1200px;background-color: white;/* margin-top: 20px; */padding: 30px 40px;box-sizing: border-box;}.part1 {height: 100px;width: 1100px;display: flex;justify-content: space-between;align-items: center;/* margin-top: 10px; */}.part2 {height: 300px;width: 1100px;display: flex;flex-direction: column;align-items: center;justify-content: space-between;gap: 20px;}.part1-left {height: 80px;width: 300px;display: flex;justify-content: center;align-items: center;gap: 10px;}.part1-right {height: 80px;width: 300px;display: flex;justify-content: space-between;align-items: center;gap: 20px;}.part2-top {margin-top: 2px;width: 800px;height: 100px;}.part2-middle {width: 400px;height: 100px;font-size: 20px;}.part2-bottom {width: 300px;height: 100px;display: flex;justify-content: center;align-items: center;gap: 20px;margin-top: 20px;}.part3 {height: 300px;width: 1100px;display: flex;flex-direction: column;align-items: center;justify-content: space-between;}.part3-top {margin-top: 2px;width: 600px;height: 30px;}.part3-middle {width: 1000px;height: 200px;display: flex;justify-content: space-between;align-items: center;}.part3-bottom {margin-bottom: 2px;width: 300px;height: 50px;}.card {height: 180px;width: 180px;}文章到这里就结束了,文章更多作为自我学习,也希望对你有所帮助,有错欢迎指出。
