1.為什麼這樣設定div不會出現?

h-100沒顯示的原因?因body(父層)沒有給寬高
但是直接設body會影響其他人,所以在包一個div給他

      <div class="w-25 h-100 bg-success">Apple</div>

解決

      <div style="height: 150px; background-color: black">
        <div class="w-25 h-100 bg-success">Apple</div>
      </div>

2..d-flex和 .d-inline-flex 的差異

1.d-flex 以下換行

 <div class="d-flex bg-secondary text-white p-3">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

2.d-inline-flex

 以下會壓在一行裡面
      <div class="d-inline-flex bg-secondary text-white p-3">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>
  就像這樣

3. order- 改變元素順序

數字越小越前面 不輸入最大!如:Item2

    <div class="d-flex bg-secondary text-white p-3">
        <div class="order-3 p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="order-1 p-2 bg-success">Item3</div>
      </div>

4.該如何設置，讓第一個元素靠左邊，其餘元素靠右邊排列？

各種奇怪方法,雖然很奇怪 但是就是有用XD
(1)mr-auto

      <div class="d-flex bg-secondary text-white p-3">
        <!--   -->
        <div class="mr-auto p-2 bg-danger">Item1</div>
        <div class="        p-2 bg-warning">Item2</div>
        <div class="        p-2 bg-success">Item3</div>
      </div>

(2)ml-auto

      <div class="d-flex bg-secondary text-white p-3">
        <div class="        p-2 bg-danger">Item1</div>
        <div class="ml-auto p-2 bg-warning">Item2</div>
        <div class="        p-2 bg-success">Item3</div>
      </div>

(3)hr

   <div class="d-flex bg-secondary text-white p-3">
        <div class="p-2 bg-danger">Item1</div>
        <hr />
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

5.Flex-Justify-Content(主軸,副軸的滑動)

.justify-content-設定父

     <div class="d-flex justify-content-center bg-secondary text-white">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

.align-items-設定父

<div class="d-flex align-items-center bg-secondary text-white" style="height: 150px">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

.align-content-設定父

     <div class="d-flex align-content-center flex-wrap bg-secondary text-white p-3" style="height: 150px">
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
        <div class="p-2 bg-danger">Item1</div>
        <div class="p-2 bg-warning">Item2</div>
        <div class="p-2 bg-success">Item3</div>
      </div>

.align-self-設定子

      <div class="d-flex bg-secondary text-white p-3" style="height: 150px">
        <div class="align-self-start p-2 bg-danger">Item1</div>
        <div class="align-self-center p-2 bg-warning">Item2</div>
        <div class="align-self-end p-2 bg-success">Item3</div>
      </div>

6.是否需要階層？要怎麼分辨呢？

(檔案css20_(抓標籤位置筆記)combinator_selectors)

查css看是否有 1.空白 2.>

記憶法 後裔選擇器

1.   nav 裡面所有的nav-item(爸爸 孫子 *包容)
2. > nav 底下一層的nav-item(爸爸 *針對)


3. ~ nav 之後所有的nav-item(同一層)(河流~)
4. + nav 同一層之後的第一個nav-item(*1+1=2,只有一個)

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>