css Flexboxで両端ぞろえヘッダーやfooterに活跃する!!

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css Flexboxで両端ぞろえヘッダーやfooterに活跃する!!相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flexboxで両端ぞろえ</title>
  <link rel="stylesheet" href="base.css">
  <style>
    header {
  -js-display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px;
}

ul {
  -js-display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

ul li {
  margin-left: 5px;
  margin-right: 5px;
}


@media (max-width: 500px) {
  header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
  }

}
  </style>

</head>
<body>
<header>
  <img src="http://www.placehold.it/150x120/333/ffffff&text=logo" alt="">
  <ul>
    <li><a href="">menu1</a></li>
    <li><a href="">menu2</a></li>
    <li><a href="">menu3</a></li>
  </ul>
</header>
<code>space-between</code> →均等配置(両端ボックスは始端と終端)

</body>
</html>

/* base style */
* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
}

body {
  background-color: #f8f8f8;
}

a {
  color: #222;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
}

/* animalクラス */

.animal {
  box-shadow: 0 0 3px #aaa;
}

.animal h1 {
  font-weight: normal;
  text-align: center;
  font-size: 1.2rem;
  padding: 5px;
}

.animal p {
  padding: 10px;
}

.animal img {
  width: 100%;
}

aside {
  padding: 10px;
}

以上是关于css Flexboxで両端ぞろえヘッダーやfooterに活跃する!!的主要内容，如果未能解决你的问题，请参考以下文章

css ヘッダー固定

css 子テーマのスタイルシートヘッダーサンプル

css スマホヘッダー下シャドウ

text フッターメニュー。ヘッダーメニュー

python pandas二行ヘッダー

python 大熊猫ヘッダーリスト