企业网站代码,电影宣传网站模板免费下载,贵港市城乡住房建设厅网站,国外设计网站pinterest极速版1、flex.css样式的使用场景 在移动端开发中#xff0c;并不是所有的浏览器#xff0c;webview#xff0c;微信等各种版本都支持标准的flex#xff0c;但是基本上都会支持-webkit-box#xff0c;所以flex.css的主要作用是保证每一个属性都能支持标准flex或旧版本的-webkit-…1、flex.css样式的使用场景 在移动端开发中并不是所有的浏览器webview微信等各种版本都支持标准的flex但是基本上都会支持-webkit-box所以flex.css的主要作用是保证每一个属性都能支持标准flex或旧版本的-webkit-box。由于flex.css采用了autoprefixer编译所以能够保证在浏览器不支持标准flex布局的情况下回滚到旧版本的-webkit-box保证移动设备中能呈现出一样的布局效果。于是一款移动端快速布局的神器诞生了...Flex布局的出现正是为了解决浮动和定位这些局限性它允许我们在一个容器内对子元素进行灵活的排列、对齐和空间分配。
1.2 主轴Main Axis和交叉轴Cross Axis 主轴main axis
沿其布置子容器的从 main-start 开始到 main-end 请注意它不一定是水平的这取决于 flex-direction 属性见下文 main size 是它可放置的宽度是容器的宽或高取决于 flex-direction。
交叉轴cross axis
垂直于主轴的轴称为交叉轴它的方向取决于主轴方向是主轴写满一行后另起一行的方向从 cross-start 到 cross-end cross size 是它可放置的宽度是容器的宽或高取决于 flex-direction。
2. 安装
npm install --save flex.css
3.设置主轴方向
templatedivh2从上到下/h2div classbox flexdir:topdiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/divh2从右到左/h2div classbox flexdir:rightdiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/divh2从下到上/h2div classbox flexdir:bottomdiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/divh2从左到右默认/h2div classbox flexdir:leftdiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/div/div
/template
style langscss scoped
.box {width: 100%;height: 150px;border: 1px solid #ddd;
}
.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;
}
/style4、主轴对齐方式
templatedivh2从右到左/h2div classbox flexmain:rightdiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/divh2从左到右默认/h2div classbox flexmain:leftdiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/divh2两端对齐/h2div classbox flexmain:justifydiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/divh2居中对齐/h2div classbox flexmain:centerdiv classitem stylebackground: red1/divdiv classitem stylebackground: blue2/divdiv classitem stylebackground: #0003/div/div/div
/template
style langscss scoped
.box {width: 100%;height: 150px;border: 1px solid #ddd;
}
.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;
}
/style
script setup/script5、交叉轴对齐方式
templatedivh2从上到下默认/h2div classbox flexcross:topdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2从下到上/h2div classbox flexcross:bottomdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2基线对齐/h2div classbox flexcross:baselinediv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2居中对齐/h2div classbox flexcross:centerdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2高度并排铺满/h2div classbox flexcross:stretchdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/div/div
/template
style langscss scoped
.box {width: 100%;height: 150px;border: 1px solid #ddd;
}
.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;
}
/style
script setup
/script6、子元素设置
templatedivh2子元素平分空间/h2div classbox flexbox:meandiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2第一个子元素不要多余空间其他子元素平分多余空间/h2div classbox flexbox:firstdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2最后一个子元素不要多余空间其他子元素平分多余空间/h2div classbox flexbox:lastdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2两端第一个元素不要多余空间其他子元素平分多余空间/h2div classbox flexbox:justifydiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/div/div
/template 7、flex-box元素剩余空间比例分配
templatedivh2flex-box实现两端不需要多余空间中间占满剩余空间/h2div classbox flexdiv classitem flex-box0 stylebackground: red1/divdiv classitem flex-box1 stylebackground: blue2/divdiv classitem flex-box0 stylebackground: #0003/div/div/div
/templatestyle langscss scoped
.box {width: 100%;height: 100px;border: 1px solid #ddd;
}
.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;
}
/stylescript setup/script
