css3 - css flex 子元素居中

问题描述

问 题

明显黄色小标标没有在中间

<style>
    .box1 {
        display: flex;
        width: 300px;
        height:300px;
        background: #dedede;
        border-radius: 5px;
        padding: 10px;
        margin: 10px;
    }

    .item1 {
        width: 50px;
        height: 50px;
        background: orange;
        border-radius: 3px;
    }
    .item1:nth-child(2) {
        align-self: center;
    }
</style>

<div class="box1">
    <span class="item1"></span>
    <span class="item1"></span>
</div>

我怎么换方向 怎么调都没有真正的居中，怎么去布局它呢？

解决方案

你可以先查下手册 align-self: center 是弹性盒子元素在该行的侧轴（纵轴）上居中放置。

水平居中的是justify-content:center

==================以下更新=========================

justify-content:center 是应用在容器上的，你想实现一个在开始位置，然后一个居中，那就自己实现,
比如默认容器上 justify-content：flex-start 然后

.item1:nth-child(2) {
      margin-left: calc(50% - 75px); /* 75px  是第一个盒子的宽度加上自身宽度的一半 */
}

这篇关于css3 - css flex 子元素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！