对包含有子元素的元素进行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. Unity2019.1中文技术手册离线版

    使用离线版优质.系统化的教程.经验文档.参考手册,为开发者节省时间,提高效率! 解压后打开UnityDocumentation_2019.1/Manual/index.html 需要的自取,下载地址: ...

  2. hg19基因组 | 功能区域 | 位置提取

    如何获取hg19的CDS.UTR.intergenic.intron等的位置信息? 参考手册: Hg19 regions for Intergenic, Promoters, Enhancer, Ex ...

  3. C# 序列化与反序列化之xml对属性或者字段的子类化的子对象进行序列化的解决方案

    C# 序列化与反序列化之xml对属性或者字段的子类化的子对象进行序列化的解决方案 xml序列化涉及到XmlRoot,XmlInclude,XmlElement,XmlAttribute,XmlType ...

  4. ios 打包相关的那些报错

    这张图片是因为打包bitcode的时候出现了失败,重新打包即可 这个是因为电脑容量不足导致的无法启动模拟器,这个经常发生在128g的电脑并且同时开启多个模拟器的情况下 打完包后,苹果会给你发邮件告诉你 ...

  5. android 桌面图标添加数字角标

    是否支持角标并不与手机厂商有关,而是你当前使用的launcher开发厂商有关. 方法实现: import android.app.Application; import android.app.Not ...

  6. Ubuntu16.04下配置VScode的C/C++开发环境

    博客转载:https://blog.csdn.net/weixin_43374723/article/details/84064644 Visual studio code是微软发布的一个运行于 Ma ...

  7. IDEA快捷键无法使用

    IDEA快捷键无法使用 觉得有用的话,欢迎一起讨论相互学习~Follow Me 今天新换了一台主机,但是很奇怪的是自己的IDEA快捷键使用不了了,以为是主机还是硬件的问题,最终解决后,发现是软件之间的 ...

  8. 【翻译】Flink Table Api & SQL — 流概念

    本文翻译自官网:Streaming Concepts  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/st ...

  9. light4j一个轻量级的低延时、高吞吐量、内存占用量小的API平台

    1.背景(abstract) 笔者算是一个极客类型的程序员了.喜欢探索一些程序内在的原理.稳定性.自动化运维.健壮性,很多时间也会 去对程序的内存使用率.cpu使用率锱铢必较.尽量克扣掉不必要的cpu ...

  10. CPU时序信号和分频