在 CSS 中,我们可以使用 display: inline-block; 或者 float 属性来让两个盒子处在同一行,但是有时候我们想要让它们分开,那么该怎么做呢?我们可以使用 display:
在 CSS 中,我们可以使用 display: inline-block;
或者 float
属性来让两个盒子处在同一行,但是有时候我们想要让它们分开,那么该怎么做呢?
我们可以使用 display: flex;
属性来实现这个效果。在父元素上加上 display: flex;
后,子元素会默认成为 flex-item,所以我们只需要给需要分开的子元素添加一些属性即可。比如要让第二个子元素换行,我们可以这样写:
.parent { display: flex; } .child1 { width: 100px; height: 100px; background-color: #f00; } .child2 { width: 100px; height: 100px; background-color: #0f0; flex-wrap: wrap; }
上面的代码中,我们在第二个子元素上加了一个 flex-wrap: wrap;
属性,这样子元素就会在父元素的宽度不够的时候自动换行了。如果我们想要让两个子元素分别占据一行,可以这样写:
.parent { display: flex; flex-wrap: wrap; } .child1 { width: 100%; height: 100px; background-color: #f00; } .child2 { width: 100%; height: 100px; background-color: #0f0; }
这里我们在父元素上加了一个 flex-wrap: wrap;
属性,这样子元素就可以自动换行了。然后给子元素加上了 width: 100%;
,这样它们就可以分别占据一行了。
总之,使用 display: flex;
属性可以让我们更方便地控制子元素的位置和大小,给网页设计带来更多可能。
粉丝
0
关注
0
收藏
0