34333


Flexboxを使って、

下の画像（画像A）のような場合に  
１と２のみを1行目におき  
３と４を下端に持って行くというようなこと（画像B）はできませんか？

.containerの幅に追従して、  
2のみが右端によっているような状態です。

今、2にのみ`margin-left:auto;`を  
設定しています。

`justify-self`とかってないのですかね？

【画像A】  
[![A](https://i.stack.imgur.com/jHFsC.png)](https://i.stack.imgur.com/jHFsC.png)

↓↓↓↓↓↓

【画像B】  
[![B](https://i.stack.imgur.com/VNyqr.png)](https://i.stack.imgur.com/VNyqr.png)

[html]

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="styles.css">
      </head>
      <body>
        <div class="container">
    
          <div class="box box_1">
            1
          </div>
    
          <div class="box box_2">
            2
          </div>
    
          <div class="box box_3">
            3
          </div>
    
          <div class="box box_4">
            4
          </div>
    
        </div>
    
      </body>
    </html>
    
[/code]

[css]

[code]

    @charset "UTF-8";
    
    .container{
      height: 600px;
      width: 600px;
      background: #ccc;
      display: flex;
      flex-wrap: wrap;
    }
    
    .box{
      width: 100px;
      height: 100px;
    }
    
    .box_1{
      background: skyblue;
    
    }
    .box_2{
      background: lime;
      margin-left: auto;
    }
    .box_3{
      background: yellow;
    
    }
    .box_4{
      background: tan;
    
    }
    
[/code]

ちなみに下のCSSのように  
３と４に

[code]

    align-self:flex-end;
    
[/code]

としてもうまくいきません。【画像C】

【画像C】  
[![画像の説明をここに入力](https://i.stack.imgur.com/wEOK0.png)](https://i.stack.imgur.com/wEOK0.png)  
[css]

[code]

    @charset "UTF-8";
    
    .container{
      height: 600px;
      width: 600px;
      background: #ccc;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    
    .box{
      background: tomato;
      height: 100px;
    }
    
    .box_1{
      background: skyblue;
      width: 100px;
    }
    
    .box_2{
      background: lime;
      width: 100px;
      margin-left: auto;
    }
    
    .box_3{
      background: yellow;
      width: 100px;
      align-self: flex-end;
    }
    
    .box_4{
      background: tan;
      width: 100px;
      align-self: flex-end;
    }
    
[/code]


CC BY-SA 3.0
2017-04-27T14:19:41.990
34331
2017-04-29T10:49:53.970
2017-04-27T14:58:56.803
12297
12297
question
html css
Flexboxで、1行に並ぶボックスの数を指定したい。


  
まずflexboxの設定として上下両端に合わせと左右両端に合わせにより四隅に配置されるように準備します。

[code]

    .container {
      align-content: space-between;
      justify-content: space-between;
    }
    
[/code]

次に幅100%のダミー要素を用意することで、いつでも溢れて改行されるように準備します。

[code]

    .container::after {
      content: '';
      width: 100%;
    }
    
[/code]

最後に折り返したい個所の`order`を変更します。今回では3番目と4番目を`1`にします。

[code]

    .box:nth-child(n+3) {
      order: 1;
    }
    
[/code]

以上により、`order: 0`としては`.box_1`、`.box_2`、`.container::after`、次に`order:
1`として`.box_3`、`.box_4`の順になります。  
そのため、１段目に`.box_1`と`.box_2`、２段目に`.container::after`、３段目に`.box_3`と`.box_4`が配置されるため、各ボックスが四隅に配置されることになります。

[code]

    .container {
      height: 600px;
      width: 600px;
      background: #ccc;
      display: flex;
      flex-wrap: wrap;
    }
    
    .box {
      width: 100px;
      height: 100px;
    }
    
    .box_1 {
      background: skyblue;
    }
    
    .box_2 {
      background: lime;
    }
    
    .box_3 {
      background: yellow;
    }
    
    .box_4 {
      background: tan;
    }
    
    
    /* 追加部分 */
    
    .container {
      align-content: space-between;
      justify-content: space-between;
    }
    
    .container::after {
      content: '';
      width: 100%;
    }
    
    .box:nth-child(n+3) {
      order: 1;
    }
[/code]

[code]

    <div class="container">
      <div class="box box_1">
        1
      </div>
      <div class="box box_2">
        2
      </div>
      <div class="box box_3">
        3
      </div>
      <div class="box box_4">
        4
      </div>
    </div>
[/code]


CC BY-SA 3.0
2017-04-27T14:52:26.700
34333
2017-04-29T10:49:53.970
2017-04-29T10:49:53.970
4236
4236
34331
answer