詳細CSS FlexBox編

コメントを残す

basic

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CSSの練習</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>
</body>
</html>
.container {
  display: flex;
}
.box {
  width: 100px;
  height: 100px;
}

.box1 {
  background-color: orange;
  flex: 1;
}
.box2 {
  background-color: skyblue;
}
.box3 {
  background-color: tomato;
}

プロパティ

Flex Container

  • flex-direction
    • row
    • row-reverse
    • column
    • column-reverse
  • justify-content 主軸幅内での位置
    • flex-start
    • flex-end
    • center
    • space-between
  • align-items 交差軸の高さが余っている時の動作
    • flex-start
    • flex-end
    • center
  • flex-wrap 主軸要素幅が足りない時の動作
    • nowrap
    • wrap
  • align-content flex-wrapがwrapの場合有効
    • flex-start
    • flex-end
    • space-between

Flex Item

  • align-self
    • flex-start
    • flex-end
    • center
  • order
    • 個々の 並ぶ順番
  • flex-basis flex-grow, flex-shrinkの基本幅
    • auto 要素の幅　
  • flex-grow 主軸幅が余っている時の伸張割合
    • 0 default 余っていても、なにもしない
  • flex-shrink 主軸幅が足りないときの収縮割合
    • 1 default 　足りないときは、同じ割合で縮小されている
  • flex flex-basis,grow,shrinkの一括設定
    • flex: 1 1 100px;
    • flex-grow: 1;
    • flex-shrink: 1;
    • flex-basis: 100px
    • flex: initial;
    • flex-grow: 0;
    • flex-shrink: 1;
    • flex-basis: auto;
    • flex: auto;
    • flex-grow: 1;
    • flex-shrink: 1;
    • flex-basis: auto;
    • flex: none;
    • flex-grow: 0;
    • flex-shrink: 0;
    • flex-basis: auto;
    • flex: 1; growのみ変更, flex autoよりもこちらがよく使われる
    • flex-grow: 1;
    • flex-shrink: 1;
    • flex-basis: 0%;

2カラムレイアウト

<body>
  <header>Header</header>
  <div class="container">
    <main>Main</main>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</body>
body {
  margin: 0;
}
header {
  background-color: orange;
}

.container {
  display: flex;
}

main {
  background-color: skyblue;
  /* 伸び縮指定 */
  flex: 1;  
}

aside {
  background-color: tomato;
  width: 100px;
}

footer {
  background-color: gray;
}

3カラムレイアウト

<body>
  <header>Header</header>
  <div class="container">
    <main>Main</main>
    <nav>Nav</nav>
    <aside>Aside</aside>
  </div>
  <footer>Footer</footer>
</body>
main {
  background-color: skyblue;
  /* 伸び縮指定 */
  flex: 1;  
}

aside {
  background-color: tomato;
  width: 100px;
}
nav {
  background-color: aqua;
  width: 100px;
  order: -1;
}

縦方向配置

flex-box 直近の小要素に影響して、孫要素には影響しない
flex-boxでは、マージンの相殺はおきない

html {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: inherit;
}
header {
  background-color: orange;
}

.container {
  display: flex;

  flex: 1;
}

main {
  background-color: skyblue;
  /* 伸び縮指定 */
  flex: 1;  
}

aside {
  background-color: tomato;
  width: 100px;
}
nav {
  background-color: aqua;
  width: 100px;
  order: -1;
}

footer {
  background-color: gray;
}

要素の中央配置

withの中央配置だけなら、margin: 0 autoのほうが簡単

<body>
  <header>
    <div></div>
  </header>
</body>

flex-boxを使わない場合、absoluteを使って表現

html {
  height: 100%;
}
body {
  margin: 0;
  height: inherit;
}
header {
  height: 200px;
  background-color: orange;
  position: relative;
}

div {
  width: 200px;
  height: 40px;
  background-color: skyblue;
  position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 100px)
}

flex-boxで中央配置

html {
  height: 100%;
}
body {
  margin: 0;
  height: inherit;
}
header {
  height: 200px;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  /* position: relative; */
}

div {
  width: 200px;
  height: 40px;
  background-color: skyblue;
  /* position: absolute;
  top: calc(50% - 20px);
  left: calc(50% - 100px) */
}

ヘッダーレイアウト

<body>
  <header>
    <img src="img/logo.png" width="64" height="64" alt="">
    <nav>
      <ul>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Menu</a></li>
      </ul>
    </nav>
  </header>
</body>
html {
  height: 100%;
}
body {
  margin: 0;
  height: inherit;
}
header {
  display: flex;
  /* justify-content: space-between; */
}
nav{
  margin-left: auto;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

横並びメニュー

header {
  display: flex;
  /* justify-content: space-between; */
}
nav{
  margin-left: auto;
}
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
nav a {
  display: block;
  width: 100px;
  line-height: 64px;
  text-align: center;
  /* background-color: pink; */
}
nav a:hover {
  background-color: #eee;
}

画像とテキストの配置

<body>
  <section>
    <div class="pic">
      <img src="img/logo.png">
    </div>
    <div class="desc">
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div>
  </section>
  <section>
    <div class="pic">
      <img src="img/logo.png">
    </div>
    <div class="desc">
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div>
  </section>
  <section>
    <div class="pic">
      <img src="img/logo.png">
    </div>
    <div class="desc">
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div>
  </section>
  <section>
    <div class="pic">
      <img src="img/logo.png">
    </div>
    <div class="desc">
      <p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
    </div>
  </section>
</body>
section {
  display: flex;
  margin-bottom: 60px;
}

.pic {
  width: 180px;
  margin-right: 32px;

}

.desc {
  flex: 1;
}

並び替え

section {
  display: flex;
  margin-bottom: 60px;
  justify-content: space-between;
}

section:nth-child(even) {
  flex-direction: row-reverse;
}

.pic {
  width: 180px;
  /* margin-right: 32px; */

}

.desc {
  /* flex: 1; */
  width: calc(100% - 180px - 32px);
}

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です