在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

圖片描述

三個紅色的是相鄰的.
結構:

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

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

clipboard.png

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

這個不叫一個居左一個居右吧,應該是:“兩列布局,自適應寬度吧?”

.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
2018年4月29日 09:07