移动web第四天（Flex布局之主轴方向及换行）

步步生花@苏殿主

已于 2022-04-16 18:29:30 修改

阅读量359

点赞数

分类专栏：移动web学习文章标签：前端 css3 学习

于 2022-04-13 10:30:41 首次发布

本文链接：https://blog.csdn.net/sjp991012/article/details/124141909

版权

移动web学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Flex布局模型中的主轴方向设置（row, column等）以及如何通过flex-wrap实现换行。通过实例展示如何在order.html中应用这些概念，并结合base.css和order.css进行快速开发。

摘要由CSDN通过智能技术生成

一、Flex布局

1、主轴方向

Flex布局模型中，弹性盒子的主轴默认是水平方向，侧轴默认是垂直方向
修改主轴方向属性: flex-direction

属性值	作用
`row`	行, 水平(默认值)
`column`	`列, 垂直`
`row-reverse`	行, 从右向左
`column-reverse`	列, 从下向上

2、弹性盒子换行

弹性盒子换行显示: flex-wrap: wrap;
调整行对齐方式：align-content，取值与justify-content基本相同

二、使用Flex布局模型快速开发

在这里插入图片描述

1、oreder.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/order.css">
</head>
<body>
    <!-- 主体内容 -->
    <div class="main">
        <div class="pannel user_msg">
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <div class="user">
                <p><span>林丽</span>18500344557</p>
                <p>北京市  海淀区  中关村软件园   信息科技大厦1号
                    楼410#   </p>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <div class="pannel goods">
            <div class="pic">
                <a href="#">
                    <img src="./uploads/pic.png" alt="">
                </a>
            </div>
            <div class="info">
                <p>康尔贝 非接触式红外体温仪</p>
                <p>领券立减30元 婴儿级材质 测温…</p>
                <div class="info_more">粉色   红外体温计</div>
                <div class="price">
                    <span class="red">¥<i>266</i></span>
                    <span>¥299</span>
                </div>

            </div>
            <div class="num">
                <i class="iconfont icon-x"></i> 
                <span>1</span>
            </div>
        </div>
        <section class="pannel other">
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5>买家备注</h5>
                <p>希望可以尽快发货，谢谢~</p>
            </div>
            <div>
                <h5>支付方式</h5>
                <p>支付宝<i class="iconfont icon-more"></i></p>
            </div>
        </section>
    </div>
    <!-- 主体内容 -->

    <!-- 底部支付 -->
    <div class="pay">
        <div class="left">合计：<span class="red">￥<i>266.00</i></span></div>
        <div class="right"><a href="#">去支付</a></div>
    </div>
    <!-- 底部支付 -->
</body>
</html>

2、base.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: 16px/1.5 sans-serif;
  color: #333;
  background-color: #fff;
}
li {
  list-style: none;
}
em,
i {
  font-style: normal;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #5eb69c;
}
img {
  width: 100%;
  vertical-align: middle;
}
input {
  padding: 0;
  border: none;
  outline: none;
  color: #333;
}
button {
  cursor: pointer;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

3、oreder.css

body{
    background-color: #f7f7f8;
}
.red{
    color: #cf4444;
}
.pannel{
    background-color: #ffffff;
	border-radius: 5px;
    margin-bottom: 10px;
}
/* 主体内容 */
.main{
    padding: 12px 11px 80px;
}
.user_msg{
    display: flex;
    align-items: center;
    padding: 15px 0 15px 11px;
}
.user_msg .location{
    margin-right: 11px;
    width: 30px;
    height: 30px;
    background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff;
}
.user_msg .user{
    /* 剩余位置占比 */
    flex: 1;
    font-size: 12px;
}
.user_msg .user p span{
    font-size: 15px;
    margin-right: 20px;
}
.user_msg .more{
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    color: #808080;
}
.goods{
    display: flex;
    padding: 11px 0 11px 11px;
}
.goods .pic{
    width: 85px;
    height: 85px;
    margin-right: 12px;
}
.goods .info{
    flex: 1;
}
.goods .info p{
    font-size: 13px;
    color: #262626;
}
.goods .info .info_more{
    margin: 5px 0;
    width: 95px;
	height: 16px;
    background-color: #f7f7f8;
	border-radius: 2px;
	font-size: 11px;
	color: #888888;
}
.goods .info .price{
    font-size: 12px;
    color: #999;
}
.goods .info .price i{
    font-size: 16px;
}
.goods .info .price span:last-child{
    margin-left: 12px;
    text-decoration: line-through;
}
.goods .num{
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
}
.main .other{
    padding: 15px;
}
.main .other div{
    display: flex;
    font-size: 13px;
}
.main .other div h5{
    font-weight: normal;
    font-size: 13px;
}
.main .other div i{
    vertical-align: middle;
    margin-left: 5px;
    color:#808080;
}
.main .other div:nth-child(2){
    margin: 20px 0;
}
.main .other div:nth-child(2) p{
    font-size: 12px;
    color: #989898;
    margin-left: 12px;
}
.main .other div:nth-child(2n+1){
    justify-content: space-between;
}
/* 底部支付 */
.pay{
    /* 固定定位到底部 */
    position: fixed;
    left: 0;
    bottom: 0;
    /* flex布局 */
    display: flex;
    /* 主轴对齐方式 */
    justify-content: space-between;
    /* 侧轴对齐方式 */
    align-items: center;

    padding: 0 11px;
    width: 100%;
    height: 80px;
    background-color: #fff;
    border-top: 1px solid #ededed;
}
.pay .left{
    font-size: 11px;
}
.pay .left i{
    font-size: 20px;
}
.pay .right a{
    display: block;
    width: 91px;
	height: 35px;
	background-image: linear-gradient(90deg, 
		#6fc2aa 5%, 
		#54b196 100%);
	border-radius: 3px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 35px;
}

步步生花@苏殿主

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动web第四天（Flex布局之主轴方向及换行）

文章目录一、Flex布局1、主轴方向2、弹性盒子换行二、使用Flex布局模型快速开发一、Flex布局1、主轴方向Flex布局模型中，弹性盒子的主轴默认是水平方向，侧轴默认是垂直方向修改主轴方向属性: flex-direction属性值作用row行, 水平(默认值)column列, 垂直row-reverse行, 从右向左column-reverse列, 从下向上2、弹性盒子换行弹性盒子换行显示: flex-wrap: wrap;调整行
复制链接

扫一扫

专栏目录