建网站前期设计用那软件,多种专业网站建设,成都比较好的广告设计制作公司,展位搭建flex 布局已经流行好久了#xff0c;从最开始大家都在用非官方标准的 box 布局(display: box; display: -webkit-box;)#xff0c;到后来的各种兼容写法#xff0c;再到后来基本上就是只用 flex 了。毕竟标准就是标准#xff0c;虽然有时候会迟到#xff0c;但是最终肯定还…flex 布局已经流行好久了从最开始大家都在用非官方标准的 box 布局(display: box; display: -webkit-box;)到后来的各种兼容写法再到后来基本上就是只用 flex 了。毕竟标准就是标准虽然有时候会迟到但是最终肯定还是主角。现在的web前端项目特别是管理系统和移动端都在大量使用 flex 布局了。一些流行的 UI 框架也是比如 Bulma还有 Bootstrap(第5版会抛弃jQuery)。。。不过近期却发现大伙对 flex 布局这块掌握的相当的弱其实我掌握的也不好不过一些特别基础的总还是要熟悉并且能熟练应用到工作中啊。今天咱们不记流水账只把必须要熟悉的 flex 知识说一说。1# 浏览器支持只看 ie 就可以了得 ie 112# flex 布局简介flex 是 flexible box 的简写也就是弹性盒子布局。它是 CSS3 的标准不过它不是出现最早的弹性盒子布局如果你也用过 box 布局理解起来会很简单。flex 布局是用来设置其子元素如何分配页面空间的一种方式记好是子元素。3# 如果一个元素设置了 display: flex它的子元素会发生一些变化先看下子元素的排列.flex-demo { display: flex;}默认子元素会水平排列不管是不是块元素如果想要垂直排列.flex-demo { display: flex; flex-direction: column; // 加上这个子元素就垂直排列了}flex-direction 属性还有一些其它值可以自己看下至少要很清楚 row / column4# 子元素的水平方向对齐.flex-demo { display: flex; justify-content: center; // 水平居中对齐}可选的对齐方式很多flex-start | flex-end | center | space-between | space-around居中和两端对齐用的比较多。其实也不用去记知道 justify-content 是用来设置水平对齐的值在浏览器里调试就好了时间长了自己就记住了。5# 子元素垂直方向对齐.flex-demo { display: flex; align-items: center; // 垂直居中对齐}可选方式也不少flex-start | flex-end | center | baseline | stretch都试下有了上面两个属性设置一个未知宽高的元素垂直水平居中就很容易了6# 子元素弹性宽高设置特别注意这个属性是设置到子元素上的.flex-item {flex-grow: 1; // 占满父元素剩余的宽度多个子元素都是 1会平分父元素宽度}上面的 flex-grow:1 也可以简写成 flex: 1常用的地方比如下图按钮的宽度不变文本框的高度会随着屏幕的宽度自动改变这样的需求用 flex 来做大概的代码如下.flex-demo { display: flex;}.search-btn { width: 80px; ...} .search-ipt { flex-grow: 1; // flex: 1}当然flxe 还有很多其它的属性这里都没有说到自行搜索学习吧你是一个前端不能这么爱偷懒
