Tag: Align

CSS-Flex內層、外層

https://x-team.com/blog/css-grid-vs-flexbox/

參考資料:

https://sharkcoder.com/layout/flexbox

當你開始寫CSS 的時候, 你會知道… 層級概念

換句話說:

外層(父層) :

決定軸方向、Flex 的方式

內層(子層) :

內部屬性調整

外層_Container

HTML 文本

將<div> 分隔標籤寫出來，方便接下來做外層的演示。

<body>
    <div class="container">

        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        
        </div>
</body>

CSS 裝飾語言

.container{
    display: flex;
    background: greenyellow;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;
  }

外層Contianer 結果顯示

內層_Item

CSS 裝飾語言

.container{
    display: flex;
    background: greenyellow;
    width: 1000px;
    margin: 0 auto;
    padding: 50px;
  }

  .item{
    background: red;
    font-size: 30px;
    width: 600px;
    text-align: center;
    margin: 10px;
  }

內層Item 結果顯示

January 17, 2023