一个居左,其它居右,这种布局用flex怎么做?

Question

三个红色的是相邻的.
结构:

div.flex
  div.box
  div.box
  div.box

Answer 1

这个不叫一个居左一个居右吧，应该是：“两列布局，自适应宽度吧？”

.container
  display1 flex

.col-1
  width 20em

.col-2
  flex 1
  margin-left 1em 

.container
  .col
  .col
    .row
    .row

如果要放在同一级，可以参考这个 Codepen。

.container
  width 200px
  height 200px
  background-color #EEE
  display flex
  flex-direction column
  flex-wrap wrap
  
.block
  
  &:not(:first-child)
    margin-left 10px
    min-height 40%
    flex 1
    
  &:last-child
    margin-top 10px
  
.block-1
  height 100%
  background red

.block-2
  background-color blue
  
.block-3
  background-color orange

Answer 2

html

<div class="container">
  <div class="box1">固定宽度</div>
  <div class="box2">自适应宽度</div>
  <div class="box3">自适应宽度高度</div>
</div>

scss

.container {
  height: 200px;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.box1 {
  width: 100px;
  height: 100%;
  background-color: red;
  margin-right: 10px;
}
.box2 {
  width: calc(100% - 110px);
  height: 50px;
  background-color: yellow;
}
.box3 {
  flex: auto;
  margin-top: 10px;
  background-color: blue;
}

可以参考这个 Codepen