新手使用这个没问题flex布局 谁践踏了优雅 2021-09-18 07:54 180阅读 0赞 \----------------------------- 弹性布局 ------------------------------------------------------ 1、定义弹性布局(父级上定义) display:flex; 如果说内核为webkit 的必须前面加上 -webkit-flex \----------------------------------------------------------------------------------------------------- 2、设置了弹性布局之后,子元素的css中的float, clear, vertical-align 这些属性将失效。 \-------------------------------------------------------------------------------------------------- 3、可以将flex弹性布局看成一个大盒子,也就是一个大容器,只要将它定义为display:flex; 即它里面所有的子元素均自动成为容器的成员,专业术语称之为 项目 \-------------------------------------------------------------------------------------------------- 4、默认情况下,项目都是在容器里面水平排列的,即按照主轴排列,且是顺时针方向的。需(1,2,3)也就是x轴方向。(默认情况都是flex-direction:row;) <div class="box"> <div class="boxone">1</div> <div class="boxtwo">2</div> <div class="boxthree">3</div> </div> css样式: .box\{ width: 500px; height:400px; background: pink; display: flex; \} .boxone\{ width: 100px; height:200px; background: red; \} .boxtwo\{ width: 100px; height:200px; background: orange; \} .boxthree\{ width: 100px; height:200px; background: yellow; \} 效果图:![1017134-20171022155534115-1298254029.png][] \-------------------------------------------------------------------------------------------------- 5、如果是需要它反着排列(3,2,1)排列,此时就需要用到 flex-direction:row-reverse;(和我们的全部float:right;是一样的效果) .box\{ width: 500px; height:400px; background: pink; display: flex; flex-direction:row-reverse; \} ![1017134-20171022155643865-1670746555.png][] \-------------------------------------------------------------------------------------------------- 6、除了按照主轴方向排列,还有按照y轴方向排列的。 加上flex-direction:column; .box\{ width: 500px; height:400px; background: pink; display: flex; flex-direction:column; \} ![1017134-20171022160015334-1115833869.png][] 7、同理,y轴方向上倒序排列:flex-direction:column-reverse; ![1017134-20171022160202974-561410199.png][] 8、当我们容器里面的项目太多。这个时候我们会发现。这些项目都挤到了一起。项目本身的宽度根本就不起作用。以上的html代码,我们我加入几个盒子上去。 ![1017134-20171022160627443-1049941954.png][] 9、怎样才能让这些盒子本身的宽度起到作用,一行排不到,能够自动的排第二排呢?这边就需要用到弹性布局中的换行。flex-wrap:wrap; .box\{ width: 500px; height:400px; background: pink; display: flex; flex-wrap:wrap; \} ![1017134-20171022160926349-390947557.png][] flex-wrap:nowrap; (不换行) flex-wrap:wrap;(换行) flex-wrap:wrap-reverse;(倒序换行) 倒序换行效果:![1017134-20171022161232818-249992410.png][] 10、上面的换行默认情况是以x轴换行的,当然还有以y轴来换行的,也就是说,第一列排满了之后,再排第二列。 此时就需要用到flex-flow:row nowrap;(默认情况) flex-flow:column wrap;(y轴换行) flex-flow:column wrap-reverse;(倒序y轴换行) y轴换行 .box\{ width: 500px; height:400px; background: pink; display: flex; flex-flow:column wrap; \} ![1017134-20171022162213099-1394911358.png][] 倒序y轴换行: ![1017134-20171022162317787-1867404682.png][] 11、那在css中的位置关系,水平方向的左中右,垂直方向的上中下 ,用弹性布局怎么实现呢?这里就给大家介绍弹性布局怎样来实现的。首先看水平反向: 水平方向布局 justify-content:flex-start; 水平左 justify-content:center; 中 justify-content:flex-end; 水平右 justify-content:space-around; 居中显示,两边也空有间隙 justify-content:space-between; 两边不留空隙 依次看下效果: justify-content:flex-start; 水平左 (默认的) ![1017134-20171022162927271-1739938359.png][] justify-content:center; 中 ![1017134-20171022163028849-1022123938.png][] justify-content:flex-end; 水平右 ![1017134-20171022163103037-1147699420.png][] justify-content:space-around; 居中显示,两边也空有间隙(且是均等的) ![1017134-20171022163136662-443892110.png][] justify-content:space-between; 两边不留空隙(平均排列的) ![1017134-20171022163214318-787686810.png][] 垂直方向布局 align-items:flex-start; 上 align-items:center; 中 (比起css样式,垂直反向居中flex弹性布局是个不错的优势) align-items:flex-end; 下 这边就演示一个垂直底部: ![1017134-20171022163525349-185820434.png][] 但是以上的垂直位置排版必须建立在一个前提条件下,即 单行 只有一行 。对于多行,即换行的,表现出来的样子并不是我们需要看到的 如下: <div class="box"> <div class="boxone">1</div> <div class="boxtwo">2</div> <div class="boxthree">3</div> <div class="boxone">1</div> <div class="boxtwo">2</div> <div class="boxthree">3</div> </div> .box\{ width: 500px; height:800px; background: pink; display: flex; flex-wrap:wrap; align-content:center; \} ![1017134-20171022164149146-1289642247.png][] 此时对于多行的,我们用另外一个属性。即align-content:center; 其他上 ,下 也是一样的,如果是多行的话,即把items改成content 即可 其他几个也是一样的 ![1017134-20171022164222849-1215507570.png][] 12、order属性 定义项目的排雷顺序,order的值越小,排列在越前面。 这个属性是写在需要换顺序的子集上的,也就是项目上的。默认为0; <div class="box"> <div class="boxone">1</div> <div class="boxtwo">2</div> <div class="boxthree">3</div> </div> .box\{ width: 500px; height:600px; background: pink; display: flex; flex-wrap:wrap; align-items:center; \} .boxone\{ width: 100px; height:200px; background: red; order:3; \} .boxtwo\{ width: 100px; height:200px; background: orange; order:1; \} .boxthree\{ width: 100px; height:200px; background: yellow; \} ![1017134-20171022164850646-858594263.png][] [1017134-20171022155534115-1298254029.png]: /images/20210726/65ef0846be3e480db9425e58be6dfcab.png [1017134-20171022155643865-1670746555.png]: /images/20210726/fccf1db619c044358d36a2a4bace3b08.png [1017134-20171022160015334-1115833869.png]: /images/20210726/a716b45982784c85b29e2ba130842fc2.png [1017134-20171022160202974-561410199.png]: /images/20210726/5e393fcaa6254030a6e96af39aeb0ead.png [1017134-20171022160627443-1049941954.png]: /images/20210726/98c640d134254d33a5290aa90ec15bb9.png [1017134-20171022160926349-390947557.png]: /images/20210726/e232ce5fe92644bea5cc8b6b43c7e6c3.png [1017134-20171022161232818-249992410.png]: /images/20210726/55890a5fcee74625ad7039c329e45847.png [1017134-20171022162213099-1394911358.png]: /images/20210726/ef752fbdb50e4e0dab8804539de9107f.png [1017134-20171022162317787-1867404682.png]: /images/20210726/ef6aece8c7154726b4ea63812daaaa0d.png [1017134-20171022162927271-1739938359.png]: /images/20210726/87d9ef53d0de4bb094e1c7800eaea05c.png [1017134-20171022163028849-1022123938.png]: /images/20210726/ad1f92cfff47435fa3c049fab2f1f5ba.png [1017134-20171022163103037-1147699420.png]: /images/20210726/47ef841cb64a448ebdc7cc5188dc92f8.png [1017134-20171022163136662-443892110.png]: /images/20210726/66eac0eb07e64c57a20606d3e6ef9f3f.png [1017134-20171022163214318-787686810.png]: /images/20210726/03bab7c4c5bd4f4dbf174b527894330a.png [1017134-20171022163525349-185820434.png]: /images/20210726/04ea3fe273fc488d98c9996acde67ebd.png [1017134-20171022164149146-1289642247.png]: /images/20210726/71773a09a22b46238291f40c7ed29f83.png [1017134-20171022164222849-1215507570.png]: /images/20210726/bfede2f15ef94049932145cae6976e81.png [1017134-20171022164850646-858594263.png]: /images/20210726/d970a84c7f754c3c8ae6013b2ba31731.png
相关 flex布局 转自阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是flex 任何元素都可定义为flex布 港控/mmm°/ 2022年04月02日 06:11/ 0 赞/ 272 阅读
相关 Flex布局 flex弹性布局 开发工具与关键技术:DW、Flex弹性布局 作者:黄桂康 撰写时间:2019.01.16 (一个网页的 ゝ一纸荒年。/ 2022年03月25日 08:40/ 0 赞/ 212 阅读
相关 flex布局 转 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 冷不防/ 2022年03月08日 19:20/ 0 赞/ 174 阅读
相关 Flex布局 首先要有个容器,并设置display:flex;display:-webkit-flex;该容器有以下六个属性: <table> <tbody> <tr> 谁践踏了优雅/ 2022年02月27日 16:58/ 0 赞/ 209 阅读
相关 Flex布局 Flex布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 我会带着你远行/ 2021年11月17日 04:28/ 0 赞/ 321 阅读
相关 Flex布局 之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成 待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 392 阅读
相关 Flex布局 在我看书学习flex布局有疑惑后,在网上搜到了这篇文章,讲的很详细,一遍就差不多了就懂flex布局了,感谢原作者! 上上下下读五六遍,在其中纠正了一些错别字、加粗了一些文字、 秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 413 阅读
相关 新手使用这个没问题flex布局 \----------------------------- 弹性布局 ---------------------------------------------------- 谁践踏了优雅/ 2021年09月18日 07:54/ 0 赞/ 181 阅读
相关 flex布局 flex布局 传统布局与flex布局 传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f 旧城等待,/ 2021年06月24日 13:58/ 0 赞/ 494 阅读
相关 flex布局 Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便,现在越来越多的浏览器已经支持flex布局,最近出的轻... 小灰灰/ 2021年04月08日 04:13/ 0 赞/ 597 阅读
还没有评论,来说两句吧...