flex 布局

常用容器语法

  • flex-direction(显示方向): row | row-reverse | column | column-reverse;
  • justify-content(水平对齐): flex-start | flex-end | center | space-between | space-around;
  • flex-wrap(换行): nowrap | wrap | wrap-reverse;
  • align-items(垂直对齐): flex-start | flex-end | center | baseline | stretch;

常用元素语法

  • align-self(垂直对齐): auto | flex-start | flex-end | center | baseline | stretch;

色字实例

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
    }
    .item {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #666;
    }
    .item:nth-child(2) {
        align-self: center;
    }
    .item:nth-child(3) {
        align-self: flex-end;
    }
</style>
<div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
</div>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注