对包含有子元素的元素进行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. hbuilderx - 常用快捷键操作

    常用的操作有(缺少一个快捷键,就是选中行) 1. ctrl+/ 注释代码 2. ctrl+y 恢复撤销 3. ctrl+x 剪切 4. ctrl+z 撤销 5. ctrl+c 复制 6. ctrl+p ...

  2. win10安装grafana

    1.下载grafana-6.2.5.windows-amd64.msi 2.以管理员身份打开CMD 3.输入 msiexec /i 程序的完整路径 msiexec /i xxx.msi

  3. 【C++】C++ 左值、右值、右值引用详解

    左值.右值 在C++11中所有的值必属于左值.右值两者之一,右值又可以细分为纯右值.将亡值.在C++11中可以取地址的.有名字的就是左值,反之,不能取地址的.没有名字的就是右值(将亡值或纯右值).举个 ...

  4. OpenStack（三）——allinone云平台的使用方法

    接着OpenStack(二)——使用Kolla部署OpenStack-allinone云平台继续操作. 特别感谢https://www.cnblogs.com/openstackteam/p/5519 ...

  5. sql 在查询到的语句基础上添加行号

    正常查询语句: SELECT TagName FROM ps_status a WHERE a.TagName LIKE "DTmk_zybf%1bxxjcqh.PV" 查询结果: ...

  6. 使用swig在python中调用C++

    1.安装swig 下载链接: http://www.swig.org/survey.html tar -xvf swig-.tar.gz ./configure --prefix=/usr/local ...

  7. springboot放到linux启动报错：The temporary upload location [/tmp/tomcat.8524616412347407692.8111/work/Tomcat/localhost/ROOT/asset] is not valid

    1.背景 笔者的springboot在一个非root用户环境下运行,这种环境下可以保证不被潜在的jar/开源框架漏洞提权. 比如在防火墙上把外网访问来的443端口映射到本地8443的java web端 ...

  8. [Golang] mynats(对nats.go的二次封装)

    0x0 前言 最近项目开始使用nats作为消息中间件. nats的引入确实解决项目很多痛点. 比如: 1)服务动态横向扩展 2)负载均衡(nats的均衡机制只有随机,不过对我们来说也够用了) 3)多服 ...

  9. [线性代数xOI/ACM]系数矩阵的QGXZ分解

    一些无关紧要的Q&A Q:你是怎么想到这个花里胡哨的算法的啊? A:前几天学习线性代数时有幸和Magolor大佬讨论到 $LU$ 分解在多解时的时间复杂度问题,于是yy出了这个奇怪(?)的算法 ...

  10. kubernetes reference

    hyperkube在kubernetes pod里面执行kubernetes命令(例如kubectl) https://feisky.gitbooks.io/kubernetes/components ...