[css]Flex弹性布局详解 [附携程网移动端案例]

3.flex-wrap

我们先创建一个粉色的大盒子里面通过flex布局把四个紫色的小盒子排列在一行显示

相关代码如下：

1

2

3

4

在这个例子中我们有四个span，如果有五个呢，很明显一行放不开，他会另起一行么？

我们再添加一个span元素，并运行代码：

他并没有换行显示，而且让紫色盒子本来的宽度变小了

这是因为，在flex布局中，默认的子元素是不换行的，如果装不开，则会缩小子元素的宽度

flex-wrap 属性默认不换行

若想换行显示，则在父类中添加：

flex-wrap:wrap;

在上例中添加此语句后：

这样就可以在不改变子盒子的条件下自动换行显示了

4.align-items（单行）

设置侧轴上的子元素排列方式（单行）

如果我们想让上例中的子元素在父盒子里居中对齐**（水平，竖直方向均居中）**，应该怎么办呢？

修改一下子盒子（紫色）的父级（粉色）盒子的样式：

div {

display: flex;

width: 500px;

height: 200px;

background-color: pink;

justify-content: center; /主轴居中/

align-items: center; /侧轴居中/

}

注意：这里是给父级添加样式，而不是给需要居中的盒子本身

这样我们就实现了侧轴居中的效果

5.align-content（多行）

设置侧轴上的子元素的排列方式（多行）

只能运用于子项出现换行的情况，在单行下是没有效果的

属性	说明
flex-start	默认在侧轴头部开始排列
flex-end	在侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素平分父元素高度

三、flex布局子项常见属性

---

1.flex属性

flex属性定义子项分配剩余空间，用flex来表示所占的份数

如果我们想让下面四个紫色盒子平分父盒子的宽应该怎么做：

最关键的就是在子盒子样式里加入 flex:1 表示每个子盒子元素占一份

2.align-self

如果我们想让第三号盒子下来，应该怎么做呢？

用我们之前学的align-items:flex-end;能够实现么？

align-items 用来给父项设置，这样的话子项的四个元素会一起下来，不能做到让指定元素下来的效果

所以我们只需给第三个span元素添加 align-self:flex-end; 就能够实现想要的效果了

四、携程网移动端案例

---

实现效果：

index.html:

搜索：目的地/酒店/景点/航班号

我 的

• 景点·玩乐

• 周边游

• 美食林

• 一日游

• 当地攻略

  海外酒店

  海外酒店

  特价酒店

  团购

  民宿·客栈

  机票

  火车票

  特价机票

  汽车票·船票

  专车·租车

  旅游

  门票

  目的地攻略

  邮轮旅行

  定制旅行

• 

  WiFi电话卡

• 

  保险·签证

• 

  外币兑换

• 

  购物

• 

  当地向导

• 

  自由行

• 

  境外玩乐

• 

  礼品卡

• 

  信用卡

• 

  更多

  

  电话预定

  下载客户端

  我的

  index.css:

  • {

  margin: 0%;

  padding: 0%;

  box-sizing: border-box;

  }

  @font-face {

  font-family: ‘icomoon’;

  src: url(‘fonts/icomoon.eot?7kkyc2’);

  src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),

  url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),

  url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),

  url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);

  font-weight: normal;

  font-style: normal;

  }

  body {

  background-color: rgb(231, 241, 245);

  }

  .search-index {/顶部右部分固定大小盒子，搜索框部分自适应用flex布局/

  /固定定位跟父级无关，他以屏幕为准/

  display: flex;

  position: fixed;

  top: 0%;

  left: 50%;

  transform: translateX(-50%);/定位的盒子居中方法,往左走自身宽度一半/

  width: 100%;/固定的盒子应该有宽度/

  min-width: 320px;

  max-width: 540px;

  height: 44px;

  background-color: #F6F6F6;

  border-top: 1px solid #ccc;

  border-bottom: 1px solid #ccc;

  }

  .search {

  flex: 1;

  height: 26px;

  border: 1px solid #ccc;

  line-height: 24px;/c3盒模型，要减去边框/

  margin: 8px 10px;

  border-radius: 5px;

  font-size: 15px;

  color: #666;

  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);

  }

  .search::before {

  float: left;

  content: “”;

  display: block;/转换为块级元素/

  width: 23px;

  height: 23px;

  background: url(12.jpg) no-repeat;

  background-size: 23px auto;

  margin-right: 10px;

  }

  a {

  text-decoration: none;

  color: #222;

  }

  .user {

  width: 44px;

  height: 44px;

  font-size: 10px;

  text-align: center;

  color: #2eaae0;

  }

  .user::before {

  content: “”;

  display: block;

  width: 30px;

  height: 25px;

  background: url(45.png) no-repeat -3px -410px;

  background-size: 34px auto;

  margin: 2px auto 0;

  }

  .focus {

  position: relative;

  min-width: 320px;

  max-width: 540px;

  margin: 0 auto;

  padding-top: 44px;

  z-index: -1;

  }

  .focus img {

  display: block;

  width: 100%;

  }

  .focus .lunbo {

  display: flex;

  position: absolute;

  bottom: 0%;

  left: 50%;

  transform: translateX(-50%);

  width: 60px;

  height: 10px;

  justify-content: space-around;

  align-items: center;

  }

  .focus .lunbo .circle {

  width: 8px;

  height: 8px;

  background-color: #ccc;

  background: rgba(0, 0, 0, .2);

  border-radius: 50%;

  }

  .focus .lunbo .circle:first-child {

  background-color: #666;

  }

  /局部导航栏/

  .local-nav {

  display: flex;

  height: 64px;

  min-width: 320px;

  max-width: 530px;

  margin: 0 auto;

  margin-top: 3px;

  background-color: #fff;

  border-radius: 8px;

  }

  .local-nav ul {

  margin: 0;

  padding: 0;

  }

  .local-nav li {

  flex: 1;

  list-style: none;

  color: #fff;

  }

  .local-nav a {

  display: flex;

  flex-direction: column;

  align-items: center;

  font-size: 14px;

  }

  .local-nav li [class^=“local-nav-icon”] {

  width: 32px;

  height: 32px;

  background: url(45.png) no-repeat -2px -478px;

  background-size: 34px auto;

  margin-top: 5px;

  }

  .local-nav li .local-nav-icon-icon2 {

  background-position: -2px -240px;

  }

  .local-nav li .local-nav-icon-icon3 {

  background-position: -2px -137px;

  }

  .local-nav li .local-nav-icon-icon4 {

  background-position: -2px 0px;

  }

  /nav/

  nav {

  overflow: hidden;

  min-width: 320px;

  max-width: 530px;

  margin: 0 auto;

  margin-top: 3px;

  border-radius: 8px;

  }

  .nav-common {

  display: flex;

  height: 88px;

  background-color: pink;

  }

  .nav-common:nth-child(2) {

  margin: 3px 0;

  }

  .nav-items {

  flex: 1;

  最后

  技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

  技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

  
  ght: 32px;

  background: url(45.png) no-repeat -2px -478px;

  background-size: 34px auto;

  margin-top: 5px;

  }

  .local-nav li .local-nav-icon-icon2 {

  background-position: -2px -240px;

  }

  .local-nav li .local-nav-icon-icon3 {

  background-position: -2px -137px;

  }

  .local-nav li .local-nav-icon-icon4 {

  background-position: -2px 0px;

  }

  /nav/

  nav {

  overflow: hidden;

  min-width: 320px;

  max-width: 530px;

  margin: 0 auto;

  margin-top: 3px;

  border-radius: 8px;

  }

  .nav-common {

  display: flex;

  height: 88px;

  background-color: pink;

  }

  .nav-common:nth-child(2) {

  margin: 3px 0;

  }

  .nav-items {

  flex: 1;

  最后

  技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

  技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

  [外链图片转存中…(img-d5gxmLVd-1718043506056)]