CSS弹性布局flex布局

演示链接

http://www.xuanransoftware.com/phpStudy/0409/

课程总结

• 弹性布局和盒模型是完美搭配可以使所有元素和元素框放在自己想要的位置
• 注意弹性布局的容器属性和项目属性有时候受限于容器的width属性

CSS弹性布局flex布局的属性演示

1.display属性演示

• 把页面的头部设置为弹性布局，头部包含网页图标和导航栏
• css示例代码

header {
  width: 920px;
  height: 65px;
  background-color: lightseagreen;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  box-sizing: border-box;
}

• html示例代码

<header>
      <!-- 页面导航 -->
      <img src="images/logo.jpg" width="100" height="50" />
      <nav>
        <ul>
          <li>
            <a href="mainIndex.html" target="mainFrame">首页</a>
            <a href="formTable.html" target="mainFrame">用户注册</a>
            <a href="table.html" target="mainFrame">表格</a>
            <a href="listTable.html" target="mainFrame">列表</a>
          </li>
        </ul>
      </nav>
    </header>

• 效果图
  

---

2.justify-content属性演示

• 把页面的头部的项目在水平方向两端对齐
• css示例代码

header {
  width: 920px;
  height: 65px;
  background-color: lightseagreen;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

• 效果图
  

3.align-item属性演示

• 把页面的头部的项目在垂直方向居中对齐
• css示例代码

header {
  width: 920px;
  height: 65px;
  background-color: lightseagreen;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

• 效果图
  

3.flex-flow和 align-content 属性演示

• 页面导航菜单过多换行显示,多行显示后设置交叉轴的对齐方式为向起始线对齐
• css示例代码

nav {
  width: 600px;
  box-sizing: border-box;
}
nav div {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: flex-start;
}
nav div a {
  text-decoration: none;
  padding: 2px 15px;
}
nav div a:link {
  color: white;
}
nav div a:visited {
  color: blueviolet;
}
nav div a:hover {
  color: tomato;
}

• html示例代码

    <header>
      <!-- 页面导航 -->
      <img src="images/logo.png" width="220" height="56" />
      <nav>
        <div>
          <a href="index.php">首 页</a>
          <a href="invitejob.php">招聘信息</a>
          <a href="foster.php">培训信息</a>
          <a href="house.php">房屋信息</a>
          <a href="seekbuy.php">求购信息</a>
          <a href="seekjob.php">求职信息</a>
          <a href="teaching.php">家教信息</a>
          <a href="car.php">车辆信息</a>
          <a href="sale.php">出 售信息</a>
          <a href="recruitbusiness.php">招商引资</a>
          <a href="search.php">寻物启示</a>
        </div>
      </nav>
    </header>

• 效果图
  

3.align-self 属性演示

• 页面导航菜单居中显示并且添加背景图片
• css示例代码

header {
  width: 920px;
  height: 56px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  background-color: tomato;
  align-items: center;
  box-sizing: border-box;
}
nav {
  background-image: url(../images/menu.png);
  height: 56px;
  align-self: flex-start;
  display: flex;
}
nav div {
  align-self: center;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  align-content: flex-start;
}
nav div a {
  text-decoration: none;
  padding: 2px 15px;
}

• html示例代码

    <header>
      <!-- 页面导航 -->
      <img src="images/logo.png" width="220" height="56" />
      <nav>
        <div>
          <a href="index.php">首 页</a>
          <a href="invitejob.php">招聘信息</a>
          <a href="foster.php">培训信息</a>
          <a href="house.php">房屋信息</a>
          <a href="seekbuy.php">求购信息</a>
          <a href="seekjob.php">求职信息</a>
          <a href="teaching.php">家教信息</a>
          <a href="car.php">车辆信息</a>
          <a href="sale.php">出 售信息</a>
          <a href="recruitbusiness.php">招商引资</a>
          <a href="search.php">寻物启示</a>
        </div>
      </nav>
    </header>

• 效果图
  

4.项目flex 属性演示

• 页面侧边栏缩放显示
• css示例代码

aside {
  width: 220px;
  height: 500px;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
}
aside > section {
  flex: 1 1 auto;
}
aside > section:first-of-type {
  background-color: tomato;
}
aside > section:nth-of-type(2) {
  background-color: yellow;
}
aside > section:last-of-type {
  background-color: turquoise;
}
aside > section > ul > li {
  list-style-type: none;
  margin-top: 5px;
  padding: 2px;
}

• html示例代码

    <aside>
        <section>
          <label for="" class="iconfont"> 新闻资讯</label>
        </section>
        <section>
          <label for="" class="iconfont"> 搜索内容</label>
        </section>
        <section>
          <label for="" class="iconfont"> 联系我们</label>
          <ul>
            <li>名称：北京瑄然软件</li>
            <li>地址：北京顺义区...</li>
            <li>电话：<a href="tel:15010046927">1501004xxxx</a></li>
            <li>
              邮箱：<a href="mailto:573661083@qq.com">5736610xx@qq.com</a>
            </li>
          </ul>
        </section>

• 效果图