A Complete Guide to Flexbox

Question

我正在忙于一个非常简单的CSS。假设我有四个正方形，每个正方形之间都有一个正方形。我希望我的布局看起来像这样：

Layout I am looking for

但它看起来像这样：

My layout

但是我做错了。四个正方形被分组为一个元素，并且显示设置为行内块。我想将小盒子移到其父母的内部，我想应该使用“ display：flex”和“ justify-content：flex-end”来实现，例如下面的代码。我的HTML和CSS代码如下所示。

{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: honeydew;
    margin: 15px;
    width: 100%;

}

.big {
    height: 200px;
    width: 200px;
    display: flex;
}

.small {
    height: 100px;
    width: 100px;
}

.block {
    display: inline-block;
}

#small-1 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

#small-2 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}


#small-3 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}


#small-4 {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>Boxes</title>
</head>
<body>
    <div class="block" id="block">
        <div class="big" style="background-color: grey">
            <div class="small" id="small-1" style="background-color:orange"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: black">
            <div class="small" id="small-2" style="background-color: yellow"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: blue">
            <div class="small" id="small-3" style="background-color: green"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: purple">
            <div class="small" id="small-4" style="background-color: pink"></div>
        </div>
    </div>
</body>
</html>

有人可以帮我吗？似乎很明显并且很基本，但是不起作用。

Answer 1

justify-content和align-items应该放在容器级别，因此#small不一定是道具，而是.big。

我以一支笔为例： https://codepen.io/alecell-the-lessful/pen/qBZeBEx

[编辑] 我只是意识到我没有回答您的问题，也许那个链接可以帮助您：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

重点是，您应该使用item level和align-self之类的margin选择器来达到所需的行为。

如上所述，我提供了一个示例笔：https://codepen.io/alecell-the-lessful/pen/zYqgYvd

Answer 2

编辑：

div.block:nth-child(1) > div:nth-child(1) {
  align-items: start; // to vertically align to start
}
div.block:nth-child(4) > div:nth-child(1) {
  justify-content: start;// to horizontally align to start
  align-items: start; // to vertically align to start
}
div.block:nth-child(3) > div:nth-child(1) {
  justify-content: start; // to horizontally align to start
}
body{
  display:flex;
}

调整内容：

start ：项目朝着writing-mode方向的开始包装。 end ：项目朝着书写模式方向的末端包装。

对齐项：

flex-start / start / self-start ：项目位于交叉轴的开始处。它们之间的区别是微妙的，并且涉及尊重弹性方向规则或书写模式规则。 flex-end / end / self-end ：项目放置在十字轴的末端。两者的区别仍然是微妙的，涉及尊重弹性方向规则与书写模式规则。

A Complete Guide to Flexbox

`CodePen Demo`

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: honeydew;
    margin: 15px;
    width: 100%;
    display: flex;

}

.big {
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.small {
    height: 100px;
    width: 100px;
}

.block {
    display: inline-block;
}
div.block:nth-child(1) > div:nth-child(1) {
  align-items: start; 
}
div.block:nth-child(4) > div:nth-child(1) {
  justify-content: start;
  align-items: start; 
}
div.block:nth-child(3) > div:nth-child(1) {
  justify-content: start; 
}

<!doctype html>
<html>
<body>
    <div class="block" id="block">
        <div class="big" style="background-color: grey">
            <div class="small" id="small-1" style="background-color:orange"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: black">
            <div class="small" id="small-2" style="background-color: yellow"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: blue">
            <div class="small" id="small-3" style="background-color: green"></div>
        </div>
    </div>
    <div class="block" id="block">
        <div class="big" style="background-color: purple">
            <div class="small" id="small-4" style="background-color: pink"></div>
        </div>
    </div>
</body>
</html>

Flexbox，盒子里面的盒子

2 个答案:

调整内容：

对齐项：

A Complete Guide to Flexbox

`CodePen Demo`