Hugo Habor

Tag: CSS

  • CSS-Flex內層、外層

    CSS-Flex內層、外層

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

    參考資料:

    https://sharkcoder.com/layout/flexbox

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

    換句話說:

    外層(父層) : 

    決定軸方向、Flex 的方式

    內層(子層) :

    內部屬性調整
    From 六角學院

    外層_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 結果顯示

  • CSS-Align Item 對齊標籤內容

    CSS-Align Item 對齊標籤內容

    https://affinity.help/designer/en-US.lproj/index.html?page=pages/ObjectControl/align.html?title=Aligning%20objects

    首先複習一下


    之前都在研究Justify-content 是屬於 X軸 主軸方向。

    這一篇主要講述 Y軸 也就是交錯軸!

    MDN_Web 演示範例

    https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

    HTML 文本

    <ul class="menu">
  <li><a href="#">首頁</a></li>
  <li><a href="#">政治</a></li>
  <li><a href="#">娛樂</a></li>
  <li><a href="#">論壇</a></li>
  <li><a href="#">財經</a></li>
  <li><a href="#">運動</a></li>
</ul>

    CSS 裝飾語言

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

    flex-direction:column;
    justify-content:flex-start;
    flex-wrap: nowrap;

    align-items:center;
  }


  .menu li{
    background: rgb(31, 161, 231);
    font-size: 30px;
    width: 600px;
    text-align: center;
    margin: 10px;
  }

  .menu li a{
    margin: 6px;
    display: block;
    background: #4a4afc;
    padding-top: 5px;
    padding-bottom: 10px;
    text-decoration: none;
    color: #FFFFFF;
  }
  .menu li a:hover{
    background: #6A6AFF;  
    color: #ADADAD;
   }

    演示結果

  • CSS-主軸Flex -direction

    在看Flex-direction的同時, 我們必須先搞清楚 2個Keyword

    • 主軸
    • 交錯軸

    參考資料: 六角學院

    主軸

    交錯軸

    交錯軸: 與主軸垂直的軸

    交錯軸之後會再來談談!

    (主軸)Flex-Direction

    Row方向

    row的意思: 由左往右排列

    Row-reverse 方向

    顧名思義: 將Row的順序反過來排列

    Column方向

    意思就是: 由上到下的排列

    Column-reverse

    顧名思義: 將Column順序反過來排列

    總結
    本節主要是先讓你看過範例知道
    主軸在Flex排列裡面扮演的角色
    接下來將會介紹
    Justify-content/決定主軸對齊方式。

  • CSS-Flex 初步試探

    Front-end Notes

    CSS Flex 一開始只要記住一點!

    display:flex 這一定要宣告

    HTML

    <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;

      width:auto

     height: 100px;

    background-color: blue;

     margin-top: 15px;

     margin-bottom: 15px;

     margin-left: 15px;

     margin-right: 15px;

        /* padding 指的是 在container方框裡面, 向內縮小內容的px */

    padding: 20px;

    flex-direction: row ( 主軸排列方向 ) 放向 由左到右

    CSS-item 層

    item 子層樣式若要統一的話

      width:150px ;

        height:90px;

        background: #00ffa2;

        color: #033b56;

        font-style: initial;

        text-align: center;

        font-size: 35px;

        margin:10px auto;

        margin-top: 10px;

        margin-bottom: 15px;

    margin-left: 10px;

        margin-right:10px;

    畫面顯示結果如下