鍍金池/ 問答/UI  HTML/ 一個(gè)居左,其它居右,這種布局用flex怎么做?

一個(gè)居左,其它居右,這種布局用flex怎么做?

圖片描述

三個(gè)紅色的是相鄰的.
結(jié)構(gòu):

div.flex
  div.box
  div.box
  div.box
回答
編輯回答
青裙

html

<div class="container">
  <div class="box1">固定寬度</div>
  <div class="box2">自適應(yīng)寬度</div>
  <div class="box3">自適應(yīng)寬度高度</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;
}

可以參考這個(gè) Codepen

clipboard.png

2018年7月22日 20:23
編輯回答
念舊

這個(gè)不叫一個(gè)居左一個(gè)居右吧，應(yīng)該是：“兩列布局，自適應(yīng)寬度吧？”

.container
  display1 flex

.col-1
  width 20em

.col-2
  flex 1
  margin-left 1em 
.container
  .col
  .col
    .row
    .row

如果要放在同一級(jí)，可以參考這個(gè) 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
2018年4月29日 09:07