分享

【CSS】flex-direction屬性排版

  

.fbox {
  display: flex;
}
.fbox-right {
  flex-direction:row;
}
.fbox-left {
  flex-direction:row-reverse;
}
@media screen and (max-width: 767px){
.fbox .fd-column {
  flex-direction:column;
}
}

<div class="fbox">

     <div class="fd-column fbox-right">

           <div class="photo">...</div>

           <div class="content">...</div>

     </div>

     <div class="fd-column fbox-left">

            <div class="photo">...</div>

            <div class="content">...</div>

     </div>

</div>

定義外層容器 display: flex
.由左到右 flex-direction:
row (預設)
.由右到左 flex-direction:
row-reverse
.由上到下 flex-direction:
column
.由下到上 flex-direction:
column-reverse








#css  #flex 
分類:學習

評論
上一篇
  • 更多文章
    載入中... 沒有更多了