对包含有子元素的元素进行flex后，会影响原有的布局。

例如设置两个div，第一个div包含一个img（图片），第二个div包含多个p元素（对前面的img的说明）。如下图

1：当对着两个两个div进行flex布局后。虽然两个div会同时处在一行内。但第二个div内部多个p元素的排序会被打乱，因为p元素的父元素div被应用了display：flex；后，已经改变了其主轴方向，所有的p元素都会横向排列，而不是原来的纵向排列

2：为了让两个div再同一行内，同时第二个div内部的多个p元素仍按照原有的块元素排序，需要对第二个div。需对第二个div作如下处理。

display：flex；

flex-direction：column；

则会重新改变第二个div的主轴方向。从而得到我们想要的结果。

结果如下：

css，对包含有子元素的元素进行flex后，会影响原有的布局。如何后续处理的更多相关文章

  1. children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

    children([expr]) 概述 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合. 可以通过可选的表达式来过滤所匹配的子元素.注意:parents()将查找所有祖辈元素,而chil ...

  2. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  3. CSS 之 伪类及伪元素

    伪类和伪元素用起来非常的方便,在查阅资料及测试后整理下来. 一.伪类 CSS 伪类用于向某些选择器添加特殊的效果.伪类对元素进行分类是基于特征(characteristics)而不是它们的名字.属性或 ...

  4. jquery内容选择器（匹配包含指定选择器的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  6. CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

    ---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...

  7. css变换transform 以及 行内元素的一些说明

    变换transform的用法比较简单:[变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样]#test { transform: transla ...

  8. css后代选择器 .属性 元素 与 元素.属性的区别

    经常看见css的后代选择器是这样的写法: div.class   和 .class div 的形式两者的区别: div.class  是选中的类名为class 的div元素,与直接使用类选择器.cla ...

  9. 奇妙的CSS之伪类与伪元素

    我们都知道,在CSS中有很多选择器,例如id(#), class(.),属性[attr],这些虽然可以满足一些需要,但有时候还力有未逮.伪类和伪元素就提供了一个有益的补充,可以使我们更高效编码.伪类和 ...

随机推荐

  1. mstar 平台I2C 配置

    芯片的pin 脚可以用作不同的功能,总结一句就是外设进行状态和数据交换. 最常用的是作为GPIO,设置为输出模式时,通过高低电平来控制一些外围设置:// 如LED,屏的电源,背光的开关,功放的静音等等 ...

  2. hive函数 get_json_object

    pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...

  3. kotlin基础 range

    a = 1..10 //[1,10] b = 1 unitl 10 //[1,10)

  4. BicycleGAN: Toward Multimodal Image-to-Image Translation - 1 - 论文学习，成对数据

    Abstract 许多图像到图像的翻译问题是有歧义的,因为一个输入图像可能对应多个可能的输出.在这项工作中,我们的目标是在一个条件生成模型设置中建立可能的输出分布.将模糊度提取到一个低维潜在向量中,在 ...

  5. BIO,NIO,AIO到NETTY

    NIO 近期接触了几个产品都触及NIO,要么应用,要么改造项目,听多了也有些了解,但仍然不能真正理解,工期比较赶,还是要潜心下来看看. NIO是什么呢,应该是NOT-BLOCKING IO的意思,不阻 ...

  6. Hadoop深入学习之HA

    1. 基本原理 2.x版本中,HDFS架构解决了单点故障问题,即引入双NameNode架构,同时借助共享存储系统来进行元数据的同步,共享存储系统类型一般有几类,如:Shared NAS+NFS.Boo ...

  7. EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案使用详情功能-通道配置Excel导入导出

    使用EasyNVR的用户都有知道,由于EasyNVR是将设备与EasyNVR的通道进行绑定的,因此EasyNVR是通过手动的通道配置来进行设备接入的,这样可以做到将设备的和通道对应的接入.但是,如果手 ...

  8. 使用Cloud Toolkit部署SpringBoot项目到服务器

    由于我们经常发布项目到测试服,在测试服上调试一些本地无法调试的东西,所以出现了各种打包,然后上传.启动,时间都耗费在这无聊的事情上面了,偶然在网上看到IntelliJ IDEA有 Cloud Tool ...

  9. django 未成功初始化自定义表单

    用以下两句 python3 manage.py makemigrations python3 manage.py migrate 成功初始化了数据库,但是只初始化了django自带的表,未初始化我自定 ...

  10. 2017ACM/ICPC广西邀请赛 Color it

    Color it Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others)Tota ...