Flex Layout Tutorial

May 12, 2023#css35

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

This is a tutorial on flexbox layout. It provides examples of using flexbox properties to style different elements such as containers, headers, sidebars, menus, footers, and list items. The tutorial covers various flexbox properties like display, justify-content, flex-direction, flex-wrap, align-items, and more. It also includes CSS styling for text alignment, colors, borders, and margins.

Flex Layout Tutorial#

Examples#

#container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  flex-direction: column; /* Arrange vertically */
}

#header {
  display: flex;
  margin: 0 auto;
  flex-direction: column; /* Arrange vertically */
  border-bottom: 6px solid gainsboro;
}

#sidebar {
  width: 450px;
  text-align: left;
  overflow: hidden;
  border: 1px solid #FFFFFF;
}

#menu {
  display: flex;
  justify-content: end; /* Align to the right */
}

#footer {
  margin: 0 auto;
  margin-top: 10px;
  background-color: #0e3717;
  text-align: center; /* Center text */
  line-height: 60px;
  color: white;
  height: 60px; /* Background color dimensions */
  width: 900px;
}

#pagebody {
  display: flex;
  margin: 0 auto;
  margin-top: 10px;
}

#mainbody img {
  width: 100%;
}

#menu {
  display: flex;
  flex-wrap: wrap;
  margin-top: -65px;
}

#banner {
  margin-top: 22px;
  bottom: 5px solid #000000;
  clear: both;
}

a {
  text-decoration: none; /* Remove underline */
  color: #6f6f6f;
  flex-direction: row; /* Arrange horizontally */
}

a:hover {
  color: #FF0000;
}

ul {
  list-style-type: none; /* Remove bullet points */
  flex-wrap: wrap;
  flex: 0 0 auto;
  display: flex;
  height: 150%;
  margin-right: 10px;
}

li {
  position: relative; /* Absolute positioning */
  align-items: center;
  font-weight: 600;
  border: none;
  height: 150%;
  margin-right: 5px;
}

li a {
  display: flex;
  width: 100%;
  height: 150%;
}

li a::after {
  content: ""; /* Pseudo-element */
  border-right: gray solid 1px;
  margin-left: 10px;
}

li:nth-child(11) a::after {
  border: none; /* Remove line from the 11th li element */
}