Flex布局

主轴方向:(使用flex-direction改变元素排列方向)

思考:Flex布局模型中,弹性盒子默认沿着哪个方向排列?  水平方向

思考:如何实现内容垂直排列?  修改主轴的方向
主轴默认是水平方向,侧轴默认是垂直方向
修改主轴方向属性:flex-direction
    属性值        作用
    row        行,水平(默认值)
    column        *  列,垂直
    row-reverse        行,从右向左
    column-reverse        列,从上而下 
/* 1.先确定主轴方向 2.再选择对应的属性实现主轴或侧轴的对齐方式 */
弹性盒子换行:(使用flex-wrap实现弹性盒子多行排列效果)
思考:默认情况下,多个弹性盒子如何显示?  弹性盒子换行显示:flex-wrap: wrap;
调整行对齐方式 :align-content  取值与justify-content基本相同
  flex: 1;
  /* 溢出的时候显示省略号 */
  /* 因为弹性盒子的尺寸可以被内容撑开 */
  /* 被不换行的文字可以撑开这个盒子的尺寸 */
  width: 0;
 
  text-overflow: ellipsis;
  white-space: nowrap;    不换行
  overflow: hidden;

随机推荐

  1. TypeError: __str__ returned non-string (type WebStepInfo)

    错误代码: class CaseStep(models.Model): id = models.AutoField(primary_key=True) casetep = models.Foreign ...

  2. Python从入门到精通(第2版)——pyuic5: error: no such option: -m的问题解决

    前言 在学习<Python从入门到精通(第2版)>的第15章 GUI界面编程--15.2.4 将.ui文件转换为.py文件时,按照书中步骤出错时的问题解决,希望对同样学习本书的同学有所帮助 ...

  3. JS比较数值大小

    一. 简单循环算法 代码如下: const numbers = [5, 6, 2, 3, 7]; let max = -Infinity; for (let i = 0; i < numbers ...

  4. [C#]关于override和new在重写方法时的区别

    规则: 在"运行时"遇到虚方法时,对象会调用虚成员派生得最远的.重写的实现. 如果是用new修饰符实现的方法,它会在基类面前隐藏派生类重新声明的成员,这时候会找到使用new修饰符的 ...

  5. UOJ60.【UR #5】怎样提高智商

    简要题意 谜题集中有 \(n\) 个谜题,第 \(i\) 个谜题形如: \(i.\) 编号小于 \(i\) 的题目中你选择了几个 \(h_i\)? A. \(a_i\) B. \(b_i\) C. \ ...

  6. Hash——温暖人心的算法

    目录 简介 计算Hash 前缀Hash递推 快速计算子串Hash 用Hash匹配字符串 综合:P2852 [USACO06DEC]Milk Patterns G 简介 Hash,将一个字符串映射到一个 ...

  7. AI换脸实战教学(FaceSwap的使用)---------第二步Tools:处理输入数据集。

    续上篇:https://www.cnblogs.com/techs-wenzhe/p/12936809.html 第一步中已经提取出了源视频的人脸照片以及对应人脸遮罩(landmark以及其他自选遮罩 ...

  8. 今天学到的新知识--自己的电脑可以像Github Pages、码云 Pages一样发布静态资源

    大佬教我的,感觉这个很神奇哦 假设下面这个路径是我的本地电脑静态资源路径 打开powershell窗口 然后按照下图的样子执行命令 复制网址就可以访问啦 然后可以通过 https://iplocati ...

  9. BUG日记---SSM进行多表查询错误-----页面使用<c:foreach>错误

    javax.servlet.ServletException: javax.servlet.jsp.JspTagException: Don't know how to iterate over su ...

  10. 【Oculus Interaction SDK】(七)使用射线进行交互(物体 & UI)

    前言 这篇文章是[Oculus Interaction SDK]系列的一部分,如果发现有对不上的对方,可以回去翻看我之前发布的文章,或在评论区留言.如果文章的内容已经不适用于新版本了,也可以直接联系我 ...