「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」

实战效果

经过不断试错（CSS不能熟练只能不断试错了），看看我使用flex弹性盒子的效果： 再看之前乱搞一通的效果：

CSS代码：

<style>
/*元素样式，这个我最不在行，先做一个简单的出来，后面慢慢打磨*/
ul {
  overflow: hidden;
} /* 这个是浏览器的原因默认会有边距和填充 */
/* *{ margin:0; padding:0; } */
#root {
  height: 100vh;
  display: flex;
  flex-direction: row;
}
#part_left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 350px;
  background-color: #e4e8ec;
}

#ico {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
img {
  width: 120px;
}
#jump {
  height: 180px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#jump ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap; /*项目允许换行*/
  justify-content: space-around;
  margin: 0;
  padding: 30px;
  text-align: center;
}
#jump ul li {
  list-style-type: none;
  margin-top: 12px;
  width: 80px;
  font-weight: 600;
  font-size: 22px;
  
}

#only_menu{
  display: flex;
}

#menu_list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 0;
  justify-content: space-around;
  padding: 30px;
  text-align: center;
}

#menu_list li {
  list-style-type: none;
  margin-top: 12px;
  width: 80px;
  font-weight: 500;
  font-size: 25px;
}

#part_right {
  display: flex;
  width: 100%;
  top: 50px;
  right: 50px;
  background-color: #e4e8ec;
}
#url_list li {
  list-style-type: none;
}
.menu_target {
  list-style-type: none;
  font-weight: 800;
  font-size: 28px;
}
.url_list_data {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}

.url_list_data li {
  margin-top: 12px;
  margin-bottom: 18px;
  width: 120px;
  height: 40px;
}
.url_list_data li a {
  font-weight: 500;
  font-size: 25px;
}
</style>

页面讲解

主容器root

我把页面分为两个部分，能做成flex容器的标签都弄成了flex容器，父容器id为root,然后子项目分为左边固定width:350px,id为：part_left，右边id为part_right，两个都是flex容器。

part_left

这里又分成了三大部分，使用 flex-direction: column;将其中项目沿Y轴（从上向下排列,也叫交叉轴）排列，第一部分是图片，第二部分是六个‘情报处’的固定跳转链接，第三部分是菜单栏导航，使用align-items: stretch;，交叉轴方向拉伸显示。

img

img标签外层的div标签也设置成flex容器，使用justify-content: center;使img标签在主轴方向（从左到右）居中排列，

ul

也设置为flex容器，使用 flex-wrap: wrap;允许ul里面的li标签换行，使用justify-content: space-around;使项目均匀分布，每一个项目两侧有相同的留白空间，相邻项目之间的距离是两个项目之间留白的和，这样最好看

part_right

右侧就比较简单，也是flex容器，看作一个整体，把子列表使用 justify-content: flex-start;使子项目按交叉轴起点线对齐

总结要点

li

flex只能对它子元素起作用 ，li不是行内元素,是块级元素，使用dispaly:flex会把容器变成为块级元素
去掉li标签前面的点：

list-style-type: none

使li标签内的文字居中的css属性为：

  text-align: center

不使用文字默认是靠左，从左往右排列。

注意：

默认的除IE浏览器，ul都会自动向右浮动40px

所以我在写ul的属性的时候都把padding都设置成一样的，就把它清除了：

  margin: 0;
  padding: 30px;

还差一点东西，不够精简，后面再加一下真实数据再调整，接下来做一些后端的基本框架。