对包含有子元素的元素进行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. jdk 6-13最有价值新特性总结

    355: Text Blocks (Preview) JDK 13的特性.简化了大段文本的换行,例如sql或xml段. Shenandoah GC. jdk 12作为实验特性引入. JEP330-启动 ...

  2. 【FPGA】always (*) 后代码全部显示注释字体的颜色之解决方法

    2015年08月26日 09:44:05 风雨也无晴 阅读数:1289    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/scottly1/art ...

  3. ocketMQ概念模型

    ocketMQ概念模型 https://blog.csdn.net/binzhaomobile/article/details/73332463 HTTPS://blog.CSDN.net/bin找M ...

  4. Hadoop的三种调度器FIFO、Capacity Scheduler、Fair Scheduler（转载）

    目前Hadoop有三种比较流行的资源调度器:FIFO .Capacity Scheduler.Fair Scheduler.目前Hadoop2.7默认使用的是Capacity Scheduler容量调 ...

  5. thinkphp项目部署在phpstudy里的nginx上

    朋友的一个thinkphp做的项目,让我帮他部署一下的,LINUX服务器,用宝塔. 第一台服务器,装上宝塔,宝塔里装NGINX,PHP5.6,再建立网站,绑定域名,访问成功,一切正常! 昨天试着给另一 ...

  6. 【转】CAD 二次开发--属性块 Block和BlockReference

    1.属性块的定义 属性块是有构成的实体和附加信息(属性)组成的,属性块中块的定义与简单块中块的定义一样,而属性的定义主要是通过属性的AttributeDefinition类的有关属性和函数来实现的.具 ...

  7. 为什么java里面经常作List判断的时候，既要判断list不为null，又要判断size>0呢？

    没有考虑到具体的问题上面,我们单纯的来讲: 为什么java里面经常作List判断的时候,既要判断list不为null,又要判断size>0呢? list == null 说明list没有初始化( ...

  8. Qt编写安防视频监控系统15-远程回放

    一.前言 远程回放有两种处理方式,一种是采用NVR厂家提供的SDK开发包来登录到NVR上,然后根据SDK的函数接口指定的视频文件,当然也有接口查询视频文件列表等:一种是采用视频监控行业的国标GB281 ...

  9. pipeline配置sonar和自动化

    1.sonar配置webhooks, 2.url填写jenkins的地址:http://jenkinsurl/sonarqube-webhook/ 3.前提:jenkins配置好sonar的scann ...

  10. js：对象之间的复制

    1.:复制obj1,不管obj2是否有这个属性,但是ojb2中的特有属性会保留 var obj1={id:1,name:'zhangsan'} var obj2={}; for (var prop i ...