思考
Flex布局/弹性布局：(PC端对低版本浏览器不兼容/移动端可以随便用)
一个网站：http://caniuse.com 查看一个技术兼容和不兼容的浏览器版本
作用
设置方式
组成部分
使用justify-content调节元素在主轴的对齐方式
在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿主轴居中排列 |
| space-around | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| space-between | 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间 |
| space-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
使用align-items调节元素在侧轴的对齐方式
修改侧轴对齐方式属性：
| 属性值 | 作用 |
|---|---|
| flex-start | 默认值，起点开始依次排列 |
| flex-end | 终点开始依次排列 |
| center | 沿侧轴居中排列 |
| stretch | 默认值，弹性盒子沿着侧轴线被拉伸至铺满容器（子盒子没有高度的时候） |
控制某个盒子在侧轴方向的对齐方式
使用flex属性修改弹性盒子伸缩比
属性
取值分类
注意：只占用父盒子剩余尺寸的份数
特点：可以根据父元素的尺寸发生变化
注意点：
如果设计图上的图标有这样的框框（如果图标没有也要注意），这是表示这个图标的触发范围是这一个框，一般是44px
关于为什么不设置img的宽高而设置其父元素的宽高
确认订单
林丽
18500667882
北京市 海淀区 中关村软件园 信息科技大厦1号
楼410#
康尔贝 非接触式红外体温仪
领券立减30元 婴儿级材质 测温…
粉色
红外体温计
￥266
￥299
1
配送方式
顺丰快递
买家备注
希望可以尽快发货，谢谢~
支付方式
支付宝
商品总价
￥299.00
运费
￥0.00
折扣
-￥299.00
合计：￥266.00
body {
background-color: #f7f7f8;
}
/* 公共样式 */
.red {
color: #cf4444;
}
.pannel {
margin-bottom: 10px;
background-color: #fff;
border-radius: 5px;
}
/* 公共样式 */
/* 主体内容：滑动查看 */
.main {
/* 因为底部的盒子固定定位 会脱标，会压住主体的内容，所以需要将主体内容距离底部盒子一段距离（底部盒子的高度） */
padding: 12px 11px 80px;
}
/* 用户信息 */
.user_msg {
display: flex;
padding: 15px 0 14px 11px;
align-items: center;
}
.user_msg .location {
width: 30px;
height: 30px;
margin-right: 10px;
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;
}
.user_msg .user .top {
display: flex;
}
.user_msg .user .top h5 {
width: 52px;
font-size: 15px;
font-weight: 400;
color: #262626;
}
.user_msg .user .top p {
font-size: 14px;
color: #333333;
}
.user_msg .user .bottom {
margin-top: 5px;
font-size: 12px;
color: #333;
}
.user_msg .more {
width: 44px;
height: 44px;
/* ps */
/* background-color: pink; */
text-align: center;
line-height: 44px;
color: #808080;
}
/* 用户信息 */
/* 商品 */
.goods {
display: flex;
padding: 11px 0 11px 11px;
}
/* 因为在base.css里面设置了图片width：100%等于父元素宽度的百分之百，所以这里可以直接给父元素设置宽高，图片的宽高也会变化 */
.goods .pic {
width: 85px;
height: 85px;
margin-right: 12px;
}
.goods .info {
flex: 1;
}
.goods .count {
width: 44px;
height: 44px;
/* ps */
/* background-color: pink; */
text-align: center;
line-height: 44px;
}
.info h5 {
font-size: 13px;
font-weight: 400;
color: #262626;
}
.info p {
width: 95px;
height: 20px;
margin: 5px 0;
background-color: #f7f7f8;
font-size: 12px;
color: #888;
border-radius: 2px;
}
.info p span:first-child {
margin-right: 3px;
}
.info .price {
font-size: 12px;
}
.info .price span:first-child i {
font-size: 16px;
}
.info .price span:last-child {
margin-left: 5px;
color: #999;
text-decoration: line-through;
}
/* 商品 */
/* 其他信息 */
.rest {
padding: 15px;
}
.rest div {
display: flex;
margin-bottom: 30px;
}
.rest div:last-child {
margin-bottom: 0;
}
.rest div:last-child p i {
font-size: 11px;
color: #808080;
}
.rest div:nth-child(2n+1) {
justify-content: space-between;
}
.rest div:nth-child(2) p {
margin-left: 20px;
font-size: 12px;
color: #989898;
}
.rest h5,
.rest p {
font-size: 13px;
font-weight: 400;
color: #262626;
}
/* 其他信息 */
/* 总价 */
.total {
padding: 15px;
}
.total div {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}
.total div:last-child {
margin-bottom: 0;
}
.total h5,
.total p {
font-size: 13px;
font-weight: 400;
color: #262626;
}
.total div:last-child p {
color: #cf4444;
}
/* 总价 */
/* 主体内容：滑动查看 */
/* 底部内容：固定定位 */
.pay {
position: fixed;
left: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
/* 设置了固定定位的盒子会脱标，就不能默认是占满父盒子的宽度 需要自己给设置宽度 */
width: 100%;
height: 80px;
padding: 0 11px;
/* ps */
/* background-color: pink; */
border-top: 1px solid #ededed;
}
.pay .left {
font-size: 12px;
color: #1e1e1e;
}
.pay .left i {
font-size: 20px;
}
.pay .right a {
display: block;
width: 90px;
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;
}
/* 底部内容：固定定位 */
使用flex-direction改变元素排列方向
| 属性值 | 作用 |
|---|---|
| row | 行，水平（默认） |
| column | * 列，垂直 |
| row-reverse | 行，从右向左 |
| column-reverse | 列，从下向上 |
使用flex-wrap实现弹性盒子多行排列效果
设置了display:flex;所有弹性盒子一行显示，但是盒子的宽度不再是100px，因为是弹性布局，只要父级设置了display:flex;弹性盒子的尺寸都能随意伸缩
文字显示省略号
.orders .goods .txt h5 {
text-overflow: ellipsis;
/* 不换行 */
white-space: nowrap;
overflow: hidden;
}
小兔仙个人中心
.xtx_body {
padding: 30px 0 85px;
background-color: #f6f6f6;
}
.xtx_body .wrapper {
display: flex;
}
/* 侧边栏 */
.aside {
width: 227px;
min-height: 500px;
margin-right: 18px;
/* ps */
background-color: pink;
}
/* 侧边栏 */
/* 主体内容 */
.xtx_body .main {
flex: 1;
min-height: 500px;
/* ps */
/* background-color: skyblue; */
}
/* 账户信息概览 */
.overview {
display: flex;
height: 132px;
padding: 20px 0;
margin-bottom: 18px;
background-color: #fff;
}
.overview div {
display: flex;
flex: 1;
justify-content: space-evenly;
text-align: center;
}
.overview div img {
width: 25px;
margin-bottom: 10px;
}
.overview div a:last-child img {
width: 18px;
}
.overview div span {
font-size: 25px;
color: #e05e30;
}
.overview div p {
font-size: 16px;
}
.overview div:first-child {
border-right: 1px solid #f4f4f4;
}
/* 账户信息概览 */
/* 公共样式 */
.pannel {
padding: 20px 30px;
margin-bottom: 20px;
background-color: #fff;
}
.orders .pannel_title {
display: flex;
justify-content: space-between;
height: 45px;
border-bottom: 1px solid #f4f4f4;
}
.orders .pannel_title h4 {
font-size: 22px;
font-weight: 400;
color: #333;
}
.orders .pannel_title a {
margin-top: 8px;
font-size: 16px;
color: #999;
}
.orders .content {
margin-top: -1px;
}
.orders .content li {
display: flex;
height: 137px;
margin-bottom: 21px;
border: 1px solid #f4f4f4;
}
.orders .content li:last-child {
margin-bottom: 0;
}
.orders .content .goods {
display: flex;
flex: 1;
margin-right: 120px;
padding: 17px 0 14px 12px;
align-items: center;
}
.orders .goods .pic {
width: 107px;
height: 107px;
}
.orders .goods .txt {
flex: 1;
/* 溢出的时候显示省略号 */
/* 因为弹性盒子的尺寸可以被内容撑开，不换行的文字可以撑开这个盒子的尺寸 */
/* 也可以是这行文字加上省略号的宽度 */
width: 0;
}
.orders .goods .txt h5 {
text-overflow: ellipsis;
/* 不换行 */
white-space: nowrap;
overflow: hidden;
}
.orders .content .status {
width: 120px;
margin-top: 50px;
font-size: 14px;
color: #e05e30;
}
.orders .content .pay {
width: 200px;
border-left: 1px solid #e8e8e8;
border-right: 1px solid #e8e8e8;
}
.orders .content .pay p:first-child {
font-size: 14px;
color: #9a2e1f;
}
.orders .content .action {
width: 180px;
}
.orders .content .action a:first-child {
width: 100px;
height: 30px;
margin-bottom: 8px;
background-color: #5eb69c;
font-size: 14px;
color: #fff;
line-height: 30px;
text-align: center;
}
.orders .content .common {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 公共样式 */
/* 主体内容 */