如何优化好一个网站,网站建设pdf微盘,网站制作需要哪些软件有哪些,做网站成功什么是flex.css?
css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它#xff0c;但是我想我们都会有一个共同的经历#xff0c;面对它的各种版本#xff0c;各种坑#xff0c;傻傻的分不清楚#xff0c;flex.css就是对flex布局的一种封装#xff0c;通过简洁…什么是flex.css?
css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它但是我想我们都会有一个共同的经历面对它的各种版本各种坑傻傻的分不清楚flex.css就是对flex布局的一种封装通过简洁的属性设置就能使得它完美的运行在移动端的各种浏览器甚至能运行在ie10 的各种PC端浏览器中。它天然的能够很好的将页面布局和css进行分离让css专注于元素的显示效果我称之为声明式布局...... flex和data-flex
flex.css 有两个版本一个是flex.css一个是data-flex.css这两个版本其实是一样的唯一的区别是一个是使用flex属性设置一个是使用data-flex属性设置。react 不支持flex属性直接布局所以data-flex.css实际上是为了react而诞生的 安装flex.css
官方地址https://github.com/lzxb/flex.css
通过npm安装
npm install --save flex.css
本例子教程例子则是从官方项目下载下来后解压出来后将dist目录下的flex.css文件引入使用 Hello world
!DOCTYPE html
html langenheadmeta charsetUTF-8titleHello world/titlelink relstylesheet href./flex.cssstyle typetext/css.box {width: 150px;height: 150px;border: 1px solid #ddd;}/style
/headbodydiv classbox flexHello world/div
/body/html设置主轴方向
!DOCTYPE html
html langenheadmeta charsetUTF-8title设置主轴方向/titlelink relstylesheet href./flex.cssstyle typetext/css.box {width: 150px;height: 150px;border: 1px solid #ddd;}.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;}/style
/headbodyh2从上到下/h2div classbox flexdir:topdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2从右到左/h2div classbox flexdir:rightdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2从下到上/h2div classbox flexdir:bottomdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2从左到右默认/h2div classbox flexdir:leftdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/div
/body/html主轴对齐方式
!DOCTYPE html
html langenheadmeta charsetUTF-8title主轴对齐方式/titlelink relstylesheet href./flex.cssstyle typetext/css.box {width: 150px;height: 150px;border: 1px solid #ddd;}.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;}/style
/headbodyh2从右到左/h2div classbox flexmain:rightdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2从左到右默认/h2div classbox flexmain:leftdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2两端对齐/h2div classbox flexmain:justifydiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/divh2居中对齐/h2div classbox flexmain:centerdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/div
/body/html交叉轴对齐方式
!DOCTYPE html
html langenheadmeta charsetUTF-8title交叉轴对齐方式/titlelink relstylesheet href./flex.cssstyle typetext/css.box {width: 150px;height: 150px;border: 1px solid #ddd;}.item {width: 30px;/*height: 30px;*/line-height: 30px;color: #fff;text-align: center;}/style
/headbodyh2从上到下默认/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 stylefont-size: 30px; background: red;1/divdiv classitem stylefont-size: 12px; background: blue;2/divdiv classitem stylefont-size: 40px; background: #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
/body/html子元素设置
!DOCTYPE html
html langenheadmeta charsetUTF-8title交叉轴对齐方式/titlelink relstylesheet href./flex.cssstyle typetext/css.box {width: 150px;height: 150px;border: 1px solid #ddd;}.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;}/style
/headbodyh2子元素平分空间/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
/body/htmlflex-box元素剩余空间比例分配
取值范围(0-10)单独设置子元素多余空间的如何分配设置为0则子元素不占用多余的多余空间
多余空间分配 当前flex-box值/子元素的flex-box值相加之和 flex-box实现两端不需要多余空间中间占满剩余空间
!DOCTYPE html
html langenheadmeta charsetUTF-8titleflex-box实现两端不需要多余空间中间占满剩余空间/titlelink relstylesheet href./flex.cssstyle typetext/css.box {width: 150px;height: 150px;border: 1px solid #ddd;}.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;}/style
/headbodyh2flex-box实现两端不需要多余空间中间占满剩余空间/h2div classbox flexdiv classitem flex-box0 stylebackground: red;1/divdiv classitem flex-box1 stylebackground: blue;2/divdiv classitem flex-box0 stylebackground: #000;3/div/div
/body/html水平居中
!DOCTYPE html
html langenheadmeta charsetUTF-8title水平居中/titlelink relstylesheet href./flex.cssstyle typetext/css.box {width: 150px;height: 150px;border: 1px solid #ddd;}.item {width: 30px;height: 30px;line-height: 30px;color: #fff;text-align: center;}/style
/headbodyh2水平居中/h2div classbox flexmain:center cross:centerdiv classitem stylebackground: red;1/divdiv classitem stylebackground: blue;2/divdiv classitem stylebackground: #000;3/div/div
/body/html还有更强大的等待你的发现
更多专业前端知识请上
【猿2048】www.mk2048.com
