flex布局 带案例展示源代码 怼烎@ 2021-10-01 07:48 443阅读 0赞 # 源代码在文章最下面 # ## 效果截图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][] ## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 3][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 4][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 5][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 6][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 7][] # 此处为上面截图的源代码 # <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>flex布局</title> <style type="text/css"> /*默认样式*/ .ne_1 { background: red; font-size: 16px; } .ne_2 { background: blueviolet; font-size: 20px } .ne_3 { background: burlywood; font-size: 24px } .ne_bo { height: 50px; width: 50px; } .top_boa { border: 1px solid #000; } /*加flex*/ </style> </head> <body> <div class="top_bo"> <p>默认什么都没有的</p> <div class="top_boa"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>flex</p> <style type="text/css"> .flex { display: flex; } </style> <div class=" top_boa flex"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>一. flex-direction:row | row-reverse | column | column-reverse; </p> <style type="text/css"> .flexD_r { display: flex; flex-direction: row; } .flexD_rr { display: flex; flex-direction: row-reverse; } .flexD_c { display: flex; flex-direction: column; } .flexD_cr { display: flex; flex-direction: column-reverse; } </style> <p>1. row(默认值):主轴为水平方向,起点在左端</p> <div class=" top_boa flexD_r"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>2.row-reverse:主轴为水平方向,起点在右端 </p> <div class=" top_boa flexD_rr"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>3.column:主轴为垂直方向,起点在上沿</p> <div class=" top_boa flexD_c" style="height: 200px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>4.column-reverse:主轴为垂直方向,起点在下沿</p> <div class=" top_boa flexD_cr" style="height: 200px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>二. flex-wrap: nowrap | wrap | wrap-reverse;</p> <style type="text/css"> .wrap { flex-wrap: wrap; } .nowrap { flex-wrap: nowrap; } .wrap-reverse { flex-wrap: wrap-reverse; } </style> <p>1.nowrap(默认):不换行</p> <div class=" top_boa flexD_r wrap" style="width: 120px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>2.wrap:换行,第一行在上方</p> <div class=" top_boa flexD_r nowrap" style="width: 120px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>3.wrap-reverse:换行,在第一行的下方</p> <div class=" top_boa flexD_r wrap-reverse" style="width: 120px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>三.flex-flow</p> <p>flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认 row nowrap。 </p> <!--<p>.box{flex-flow:<flex-direction> || <flex-wrap>;}</p>--> <p>三. justify-content属性</p> <p> justify-content:flex-start | flex-end | center | space-between |space-around;</p> <style type="text/css"> .flex-start { justify-content: flex-start; } .flex-end { justify-content: flex-end; } .center { justify-content: center; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } </style> <p>1.flex-start </p> <div class=" top_boa flexD_r nowrap flex-start" style="width: 300px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>2.flex-end </p> <div class=" top_boa flexD_r nowrap flex-end" style="width: 300px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>3.center</p> <div class=" top_boa flexD_r nowrap center" style="width: 300px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>4.space-between</p> <div class=" top_boa flexD_r nowrap space-between" style="width: 300px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>4.space-around</p> <div class=" top_boa flexD_r nowrap space-around" style="width: 300px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。</p> <p>.flex-start(默认值):左对齐</p> <p>.flex-end:右对齐</p> <p>.center:居中</p> <p>.space-between:两端对齐,项目之间的间隔都相等</p> <p>.space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。</p> <p>四. align-items属性</p> <p>align-items属性定义项目在交叉轴上如何对齐。</p> <p> align-items:flex-start | flex-end | center |baseline | stretch;</p> <style type="text/css"> .itemStart { align-items: flex-start; } .itemEnd { align-items: flex-end; } .itemCenter { align-items: center; } .itemBaseline { align-items: baseline; } .itemStretch { align-items: stretch; } </style> <p>1.flex-start</p> <div class=" top_boa flexD_r nowrap itemStart" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2 ">2</div> <div class="ne_bo ne_3 itemStart">3</div> </div> <p>2.flex-end</p> <div class=" top_boa flexD_r nowrap itemEnd" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2 ">2</div> <div class="ne_bo ne_3 ">3</div> </div> <p>3.center</p> <div class=" top_boa flexD_r nowrap itemCenter" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2 ">2</div> <div class="ne_bo ne_3 ">3</div> </div> <p>4.baseline</p> <div class=" top_boa flexD_r nowrap itemBaseline" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1 ">1</div> <div class="ne_bo ne_2 ">2</div> <div class="ne_bo ne_3 ">3</div> <div class="ne_bo ne_1 ">4</div> <div class="ne_bo ne_2 ">5</div> <div class="ne_bo ne_3 ">6</div> </div> <p>5.stretch</p> <div class=" top_boa flexD_r nowrap itemstretch" style="width: 300px;height: 200px;"> <div class=" ne_1 " style="width: 50px;">1</div> <div class="ne_2 " style="width: 50px;">2</div> <div class=" ne_3 " style="width: 50px;">3</div> </div> <p>它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上之下。</p> <p>.flex-start:交叉轴的起点对齐</p> <p>.flex-end:交叉轴的终点对齐</p> <p>.center:交叉轴的中点对齐</p> <p>.baseline:项目的第一行文字的基线对齐。</p> <p>.stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。</p> <p>五. align-content属性</p> <p>align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。</p> <p> align-content:flex-start | flex-end | center | spance-between | space-around |stretch;</p> <style type="text/css"> .flexStart { align-content: flex-start; } .flexEnd { align-content: flex-end; } .flexCenter { align-content: center } .flexStretch { align-content: stretch } .flexSpanceBetween { align-content: space-between } .flexSpaceAround { align-content: space-around } </style> <p>1.flex-start</p> <div class=" top_boa flexD_r wrap flexStart" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">4</div> <div class="ne_bo ne_2">5</div> <div class="ne_bo ne_3">6</div> <div class="ne_bo ne_1">7</div> <div class="ne_bo ne_2">8</div> <div class="ne_bo ne_3">9</div> </div> <p>2.flex-end</p> <div class=" top_boa flexD_r wrap flexEnd" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">4</div> <div class="ne_bo ne_2">5</div> <div class="ne_bo ne_3">6</div> <div class="ne_bo ne_1">7</div> <div class="ne_bo ne_2">8</div> <div class="ne_bo ne_3">9</div> </div> <p>3.center</p> <div class=" top_boa flexD_r wrap flexCenter" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">4</div> <div class="ne_bo ne_2">5</div> <div class="ne_bo ne_3">6</div> <div class="ne_bo ne_1">7</div> <div class="ne_bo ne_2">8</div> <div class="ne_bo ne_3">9</div> </div> <p>4.stretch</p> <div class=" top_boa flexD_r wrap flexStretch" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">4</div> <div class="ne_bo ne_2">5</div> <div class="ne_bo ne_3">6</div> <div class="ne_bo ne_1">7</div> <div class="ne_bo ne_2">8</div> <div class="ne_bo ne_3">9</div> </div> <p>5.spance-between </p> <div class=" top_boa flexD_r wrap flexSpanceBetween " style="width: 300px;height: 200px;"> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">4</div> <div class="ne_bo ne_2">5</div> <div class="ne_bo ne_3">6</div> <div class="ne_bo ne_1">7</div> <div class="ne_bo ne_2">8</div> <div class="ne_bo ne_3">9</div> </div> <p>6.space-around</p> <div class=" top_boa flexD_r wrap flexSpaceAround" style="width: 300px;height: 200px;"> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">4</div> <div class="ne_bo ne_2">5</div> <div class="ne_bo ne_3">6</div> <div class="ne_bo ne_1">7</div> <div class="ne_bo ne_2">8</div> <div class="ne_bo ne_3">9</div> </div> <p>只适用多行的flex容器(也就是flex容器中的子项不止一行时该属性才有效果),它的作用是当flex容器在交叉轴上有多余的空间时,将子项作为一个整体(属性值为:flex-start、flex-end、center时)进行对齐</p> <p>该属性可能取6个值。</p> <p>.flex-start:与交叉轴的起点对齐。</p> <p>.flex-end:与交叉轴的终点对齐。</p> <p>.center:与交叉轴的中点对齐。</p> <p>.space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。</p> <p>.space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。</p> <p>.stretch(默认值):轴线占满整个交叉轴。</p> <p>四、项目的属性</p> <p>一下6个属性设置在项目上。</p> <p> .order <br /> .flex-grow <br /> .flex-shrink <br /> .flex-basis <br /> .flex <br /> .align-self </p> <p>4.1 order属性 <br /> order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0. <!--order:<integer>--> </p> <style type="text/css"> .order .ne_1 { order: 3; } .order .ne_2 { order: 2; } .order .ne_3 { order: 1; } </style> <div class=" top_boa flexD_r wrap order" style="width: 300px;height: 200px;"> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">1</div> </div> <p>4.2 flex-grow属性</p> <p>.flex-grow属性定义项目的放大比例,默认值为0,即如果存在剩余空间,也不放大。<br /> <!-- flex-grow:<number>;/* default 0*/--> </p> <style type="text/css"> .flex-grow .ne_1 { flex-grow: 5; } .flex-grow .ne_2 { flex-grow: 3; } .flex-grow .ne_3 { flex-grow: 1; } </style> </div> <div class=" top_boa flexD_r wrap flex-grow" style="width: 300px;height: 200px;"> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">1</div> </div> <p>如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目为1,则牵着占据的剩余空间将比其他项多一倍</p> <p>4.3 flex-shrink属性<br /> flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,改项目将缩小。 </p> <!--flex-shrink:<number>;/* default 1 */--> <style type="text/css"> .flex-shrink .ne_1 { flex-shrink: 1; } .flex-shrink .ne_2 { flex-shrink: 0; } .flex-shrink .ne_3 { flex-shrink: 3; } </style> </div> <div class=" top_boa flexD_r flex-shrink" style="width: 300px;height: 200px; align-items: center"> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> <div class="ne_bo ne_1">1</div> <div class="ne_bo ne_2">2</div> <div class="ne_bo ne_3">3</div> </div> <p>Flex-shrink越小,被压缩的越小。特别的,当flex-shrink:0时,不会被压缩。</p> </body> </html> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/11524962bc184043bf7b9d678d832c35.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: /images/20210724/f2c51adc65f345de86e5c36fec07509f.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 2]: /images/20210724/ed266dd5906c4992a102b1843833831e.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 3]: /images/20210724/1656ade638004c6ea68847b9fe631066.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 4]: /images/20210724/9e6db96287c74d25bc3dd4e1f0b78de7.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 5]: /images/20210724/4e5867cb4b514ae1833127b3a1582ef2.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20190821134509279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 7]: /images/20210724/bc3171b78594424ba136937af1b8e6da.png
相关 Flex布局 原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool Flex是Fl 超、凢脫俗/ 2022年09月25日 15:26/ 0 赞/ 220 阅读
相关 Flex布局 Flex布局详解 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中 短命女/ 2022年06月02日 07:54/ 0 赞/ 100 阅读
相关 flex布局 转自阮一峰http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、什么是flex 任何元素都可定义为flex布 港控/mmm°/ 2022年04月02日 06:11/ 0 赞/ 397 阅读
相关 flex布局 转 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 冷不防/ 2022年03月08日 19:20/ 0 赞/ 301 阅读
相关 Flex布局 首先要有个容器,并设置display:flex;display:-webkit-flex;该容器有以下六个属性: <table> <tbody> <tr> 谁践踏了优雅/ 2022年02月27日 16:58/ 0 赞/ 325 阅读
相关 Flex布局 之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。 现在总结下大概的用法。 flex是把一个div分成 待我称王封你为后i/ 2021年11月05日 15:44/ 0 赞/ 550 阅读
相关 flex布局 带案例展示源代码 源代码在文章最下面 效果截图![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9 怼烎@/ 2021年10月01日 07:48/ 0 赞/ 444 阅读
相关 Flex布局 在我看书学习flex布局有疑惑后,在网上搜到了这篇文章,讲的很详细,一遍就差不多了就懂flex布局了,感谢原作者! 上上下下读五六遍,在其中纠正了一些错别字、加粗了一些文字、 秒速五厘米/ 2021年09月20日 15:42/ 0 赞/ 563 阅读
相关 flex布局 flex布局 传统布局与flex布局 传统布局 flex 弹性布局 flex布局原理 flex布局父项常见属性 f 旧城等待,/ 2021年06月24日 13:58/ 0 赞/ 637 阅读
相关 flex布局 Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。在处理垂直方向的对齐比较方便,现在越来越多的浏览器已经支持flex布局,最近出的轻... 小灰灰/ 2021年04月08日 04:13/ 0 赞/ 727 阅读
还没有评论,来说两句吧...