关于flex的小问题

最新推荐文章于 2024-11-04 15:53:43 发布

winnie__wei

最新推荐文章于 2024-11-04 15:53:43 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

分类专栏：小问题文章标签： flex

本文链接：https://blog.youkuaiyun.com/winnie__wei/article/details/98789639

小问题专栏收录该内容

1 篇文章

订阅专栏

一、使用情景

// HTML代码结构如下：
	<div class="parent">
	    <div class="child" style="background-color: antiquewhite;">1</div>
	    <div class="child" style="background-color: rgb(247, 144, 10);">2</div>
	    <div class="child" style="background-color: rgb(192, 14, 14);">3</div>
	    <div class="child" style="background-color: rgb(29, 218, 231);">4</div>
	    <div class="child" style="background-color: rgb(140, 197, 8);">5</div>
	    <div class="child" style="background-color: rgb(0, 201, 216);">6</div>
	    <div class="child" style="background-color: rgb(57, 230, 109);">7</div>
	    <div class="child" style="background-color: rgb(204, 28, 57);">8</div>
	    <div class="child" style="background-color: rgb(233, 29, 199);">9</div>
	 </div>

常使用场景1：子元素之间有间隔

.parent{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  // 水平方向间隔通过该属性自动计算
    align-content: flex-start;      // 垂直方向先设为起点对齐，后子元素通过margin-bottom设置
  }
  .child{
    margin-bottom: 10px;
  }