Learning Notes

# Flex布局

# 四栏布局

    <ul class="nav">
      <li>Leading-Role</li>
      <li>Supporting-Role</li>
      <li>Team</li>
      <li>About</li>
    </ul>

.nav{
  display:flex;
  border:1px solid red;
}
.nav > li{
  padding: 4px 0.5em;
  margin-right: 10px;
  margin-top: 2px;
  font-size: 18px;
}

# 两栏布局

  <header class="header">
    <div class="logo">
      House of Cards
    </div>
    <ul class="nav">
      <li>Leading-Role</li>
      <li>Supporting-Role</li>
      <li>Team</li>
      <li>About</li>
    </ul>
  </header>

.nav{
  display:flex;
}
.nav > li{
  padding: 4px 0.5em;
  margin-right: 10px;
  margin-top: 2px;
  font-size: 18px;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center; 
  /* border:1px solid green; */
  font-size: 20px;
  background: grey;
  color: white;
}
.logo{
   margin: 6px 20px;
}

# 三栏布局

    <div class="content">
      <aside></aside>
      <main></main>
      <div class="ad"></div>
    </div>

.content{
  display:flex;
  width:800px;
  margin-left:auto;
  margin-right:auto; 
}
.content > aside {
  width: 200px;
  height: 500px;
  background-color: rgb(255, 130, 160);
}
.content > main {
  width: 500px;
  background-color: green;
}
.content > .ad {
  width: 100px;
  background-color: purple;
}

# 平均布局

    <div class="imageList">
      <div class="x">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
      </div>
    </div>

.imageList{
  width:800px;
  margin-left:auto;
  margin-right:auto;
} 
.imageList > .x{
  display:flex;
  flex-wrap:wrap;
  margin-right:-20px;
}
.image{
  width: 185px;
  height: 185px;
  margin-bottom: 20px;
  margin-right: 20px;
  background-color: rgba(255, 0, 0, 0.3);
  border:1px solid green;
}

# flex布局

.container{
  display:flex;/* inline-flex */   
}

# flex-direction:定义主轴方向

  • row: 元素摆放的方向和文字方向一致
  • row-reverse: 元素摆放的方向和文字方向相反
  • column: 元素从上放到下
  • column-reverse: 元素从下放到上

# flex-wrap:定义元素换行

  • nowrap: 所有的元素都在一行
  • wrap: 元素自动换成多行
  • wrap-reverse: 元素自动换成逆序的多行

# justify-content:将flex元素和主轴对齐

  • flex-start: 元素和容器的左端对齐
  • flex-end: 元素和容器的右端对齐
  • center: 元素在容器里居中
  • space-between:元素之间保持相等的距离
  • space-around:元素周围保持相等的距离

# align-items:在交叉轴上对齐多个元素

# align-self:单个元素分布

  • flex-start: 元素与容器的顶部对齐
  • flex-end: 元素与容器的底部对齐
  • center: 元素纵向居中
  • baseline: 元素在容器的基线位置显示
  • stretch: 元素被拉伸以填满整个容器

# align-content:多行元素分布

  • flex-start: 多行都集中在顶部
  • flex-end: 多行都集中在底部
  • center: 多行居中
  • space-between: 行与行之间保持相等距离
  • space-around: 每行的周围保持相等距离
  • stretch: 每一行都被拉伸以填满容器

← CSS定位(一) →