微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

1. `display`属性

序号	属性值	描述	备注
1	`flex;`	创建 flex 块级容器	内部子元素自动成为 flex 项目
2	`inline-flex;`	创建 flex 行内容器	内部子元素自动成为 flex 项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .container{
          width: 500px;
          height: 400px;
          display: flex;
      }
      .item{
         width: 50px;
         height: 50px;
         background: gray;
      }
      .item:nth-of-type(1){
         background: lavenderblush;
      }
      .item:nth-of-type(2){
         background: lightblue;
      }
      .item:nth-of-type(3){
         background: lightcoral;
      }
      .item:nth-of-type(4){
        background: lightgreen;
      }
      .item:nth-of-type(5){
          background: lightyellow;
      }
    </style>
</head>
<body>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
</body>
</html>

他的默认为横向排列

容器的主轴排列有四个属性

/*默认横向排列*/
flex-direction: row;
/*反向横向排列*/
flex-direction: row-reverse;
/*默认纵向排列*/
flex-direction: column;
/*反向纵向排列*/
flex-direction: column-reverse;

默认横向排列flex-direction: row;
反向横向排列
默认纵向排列 flex-direction: column;
反向纵向排列flex-direction: column-reverse;

flex-direction: 分开意思就是 flex 是盒子 direction 是方向含义为盒子方向

单行与换行

/* 默认不换行显示,如果当前容器容纳不小, 项目会自动收缩 */
flex-wrap: nowrap;
/* 如果允许换行, 当前行容纳不小的项目会拆行显示,此时,创建的容器叫:多行容器 */
flex-wrap: wrap;

flex-wrap: wrap; 这个是允许换行当子元素的宽度大于父元素的宽度时他就会换行

flex-wrap: nowrap; 不允许换行如果子元素的宽度大于父元素宽度时子元素会按照比例缩小子元素的宽度并撑满父元素

主轴项目对齐方式·

/* 默认，所有项目与主轴的起始线对齐 */
justify-content: flex-start;
/* 所有项目与主轴的结束线对齐 */
justify-content: flex-end;
/* 所有项目居中对齐 */
justify-content: center;
/* 两端对齐 */
justify-content: space-between;
/* 分散对齐 */
justify-content: space-around;
/* 平均对齐 */
justify-content: space-evenly;

justify-content: center; 居中对齐左边边距和右边边距相同
justify-content: space-between; 两端对齐两边没有边距空白部分的宽度会分成相等的份分到子元素中间并对齐
justify-content: space-around; 分散对齐每个子元素左右都获得相等的空白部分并对齐
justify-content: space-evenly; 平均对齐每个子元素都的空白部分变成相等部分并对其
交叉轴项目对齐方式
```
align-items: flex-start;
align-items: flex-end;
align-items: center;
```
align-items: flex-start;当父元素的高度没有被撑满有空余高度的时候纵向排列在起始位这个和justify-content: flex-start;没什么区别暂时不举例
align-items: flex-end;当父元素的高度没有被撑满有空余高度的时候纵向排列在结束位他会落下来跑到最底下

align-items: center; 当父元素的高度没有被撑满有空余高度的时候纵向排列在结束位当父元素的高度没有被撑满有空余高度的时候纵向排列居中高度的居中有点像文字处理时候的text-align

交叉轴项目对齐方式 /纵向对齐方式

/* 自动拉伸：默认 */
align-content: stretch;
/* 纵向排列起始位：默认 */
align-content: flex-start;
/*纵向排列结束位*/
align-content: flex-end;
/*纵向排列居中*/
align-content: center;
/*纵向排列两端对齐*/
align-content: space-between;
/*纵向排列分散对齐*/
align-content: space-around;
/*纵向排列平均对齐*/
align-content: space-evenly;

align-content: stretch; align-content: flex-start; align-content: flex-end; align-content: center;和横向排列一样
align-content: space-between; /纵向排列两端对齐/
align-content: space-around; 分散对齐
align-content: space-evenly; 平均对齐

flex 容器主轴与项目换行简写

`flex-flow`属性

flex-flow是属性flex-direction和flex-wrap的简写
语法: flex-flow: flex-direction flex-wrap

属性值	描述
`row nowrap`默认值	主轴水平, 项目不换行
`row wrap`默认值	反向横向排列, 项目换行
`column nowrap`默认值	纵向排列, 项目换行
`column-reverse wrap`默认值	反向纵向排列 , 项目换行

这个简写很好用长期会用

操纵子元素

子元素的排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .container{
          width: 500px;
          height: 400px;
          display: flex;
          flex-flow: row wrap ;
      }
      .item{
         width: 50px;
         height: 50px;
         background: gray;
          /*权重越高 排的越靠前*/
          order: 0;
      }
      .item:nth-of-type(1){
         background: lavenderblush;
          order:5;
      }
      .item:nth-of-type(2){
         background: lightblue;
          order: 4;
      }
      .item:nth-of-type(3){
         background: lightcoral;
          order: 3;
      }
      .item:nth-of-type(4){
        background: lightgreen;
          order: 2;
      }
      .item:nth-of-type(5){
          background: lightyellow;
          order: 1;
      }
    </style>
</head>
<body>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
</body>
</html>

flex 子元素交叉轴单独对齐

align-self该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式

序号	属性值	描述
1	`auto`默认值	继承 `align-items` 属性值
2	`flex-start`	与交叉轴起始线对齐
3	`flex-end`	与交叉轴终止线对齐
4	`center`	与交叉轴中间线对齐: 居中对齐
5	`stretch`	在交叉轴方向上拉伸
6	`baseline`	与基线对齐(与内容相关用得极少)

-因为改了纵向排列 baseline的效果能出来不然还是和默认一样

项目放大因子和缩小因子

flex-grow: 0; 值为0的时候不放大
flex-shrink: 0;值为0的时候不缩小当父元素比子元素小的时候用

项目计算尺寸

 /* auto === width */
 flex-basis: auto;
 /* flex-basis: 权重大于width; */
 flex-basis: 70px;
 flex-basis: 20%;
 flex-basis: 5rem;
 /* min-width / max-width 权重大于flex-basis; */
 max-width: 100px;
flex-basis: 150px;
/* width < flex-basis < min/max-width; 1权重大小排比 */

flex 项目缩放的简写

1. `flex`属性

项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
每次都要写这三个属性,非常的麻烦,且没有必要
flex属性,可以将以上三个属性进行简化:
语法: flex: flex-grow flex-shrink flex-basis

1.1 三值语法

序号	属性值	描述
1	第一个值: 整数	`flex-grow`
2	第二个值: 整数	`flex-shrink`
3	第三个值: 有效宽度	`flex-basis`

举例:

序号	案例	描述
1	`flex: 0 1 auto`	默认值: 不放大,可收缩, 初始宽度
2	`flex: 1 1 auto`	项目自动放大或收缩适应容器
3	`flex: 0 0 100px`	按计算大小填充到容器中

1.2 双值语法

序号	属性值	描述
1	第一个值: 整数	`flex-grow`
3	第二个值: 有效宽度	`flex-basis`

举例:

案例	描述
`flex: 0 180px`	禁止放大,按计算大小填充到容器中

1.3 单值语法

序号	属性值	描述
1	整数	`flex-grow`
2	有效宽度	`flex-basis`
3	关键字	`initial	auto	none`

举例:

序号	案例	描述
1	`flex: 1`	`flex: 1 1 auto`
2	`flex: 180px`	`flex: 1 1 180px`
3	`initial`	`flex: 0 1 auto`
4	`auto`	`flex: 1 1 auto`
5	`none`	`flex: 0 0 auto`

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样

批改老师：

天蓬老师

批改状态：合格

老师批语：效果图不错, 火狐浏览器对这个特别友好, 一定要学会调试和查看效果

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

offset 的用法

2022-03-01 16:40:59

关于我们免责申明意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学

1. display属性