問題描述

明顯黃色小標標沒有在中間

<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><p class='box1'> <span class='item1'></span> <span class='item1'></span></p>

我怎么換方向 怎么調都沒有真正的居中，怎么去布局它呢？

問題解答

你可以先查下手冊 align-self: center 是彈性盒子元素在該行的側軸（縱軸）上居中放置。

水平居中的是justify-content:center

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

justify-content:center 是應用在容器上的，你想實現一個在開始位置，然后一個居中，那就自己實現,比如默認容器上 justify-content：flex-start 然后

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

基本是從書和教程抄的，你看看哪個適合你。

1

.flex-container { padding: 0; margin: 0; list-style: none; /* 定義流動方向，包裝項目 *記住這是相同的： * flex-direction：row; * flex-wrap：wrap; */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* 分配剩余空間 */ -webkit-flex-flow: row wrap; justify-content: space-around; }.flex-item { background: black; padding: 2px; width: 100px; height: 100px; margin-top: 10px;}

2HTML：

<p class='flex-container'> <p></p> <p></p> <p></p> </p>

CSS:

* { margin: 0; padding: 0;}.flex-container { width: 960px; margin: 20px auto; min-height: 300px; font-weight: bold; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: space-around; justify-content: space-around; -webkit-align-items: stretch; align-items: stretch}.flex-container>p { padding: 10px}.flex-container>p:nth-child(1) { background-color: #e4f1e4; -webkit-flex: 1; flex: 1}.flex-container>p:nth-child(2) { background-color: #d2d4eb; -webkit-flex: 1; flex: 1}.flex-container>p:nth-child(3) { background-color: #f9e7e9; -webkit-flex: 1; flex: 1}回答3：

我改了一下題主的代碼、不知道題主是不是要這種效果

<style>.box1 { display: flex; width: 300px; height:300px; background: #dedede; border-radius: 5px; padding: 10px; margin: 10px; justify-content:center;} .item1 { width: 50px; height: 50px; background: orange; border-radius: 3px;}.item1{ align-self: center;} </style><p class='box1'><span class='item1'></span> </p>