div子元素使用flex布局自身使用浮动有影响吗

2024-09-03

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

对包含有子元素的元素进行flex后,会影响原有的布局. 例如设置两个div,第一个div包含一个img(图片),第二个div包含多个p元素(对前面的img的说明).如下图 1:当对着两个两个div进行flex布局后.虽然两个div会同时处在一行内.但第二个div内部多个p元素的排序会被打乱,因为p元素的父元素div被应用了display:flex:后,已经改变了其主轴方向,所有的p元素都会横向排列,而不是原来的纵向排列 2:为了让两个div再同一行内,同时第二个div内部的多个p元素仍按照原有的

给div设置background-color: rgba(0, 0, 0, 0.2)属性，并加了css3动画--opacity动画淡出动画，之后div子元素的字体会抖一下

问题:给div设置background-color: rgba(0, 0, 0, 0.2)属性,并加了css3动画--opacity动画淡出动画,之后div子元素的字体会抖一下: 解决:animation: myfirst 2s;加上animation: myfirst 2s forwards;之后就可以了, 要实现的样式:div框淡出,但保证div的字体opoacity为1,要不然字体不清晰.(如果给div设置opacity,div子元素都会有透明度) 解决方案:用background-col

[jquery]高级篇--获取div子元素

参考: http://zhidao.baidu.com/link?url=IfeQQBn1xMLqWvwdkKbQYJ8mC6ciGi_8M1NYkm6iQ-kXBMX2f2ylN-ckzFLiynnE0nz4hBC6e5CrwaOfwLfata 参考: http://blog.sina.com.cn/s/blog_7718755501019kg5.html 实现方法:使用遍历函数children(),关键代码为 $(this).children("li"),表示获取当前元素下所有标签

display:flex;下的子元素width无效问题

因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性. 该属性介绍: 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. 根据上述介绍可以理解为默认 1 为开启收缩所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto; 解决了display:flex下的子元素设置宽度无效的问题.

在移动端中的flex布局

flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局, 弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, 想让另外一个div的占据剩下的宽度: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

CSS3的flex布局

flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度伸缩项目的float,clear,vertical-align属性失效不能继承flex框,但可以依次设置可以修改flex流的方向以及布置规则现在就大体讲述下这个具体属性的表示含义. 设置flexbox的兼容性将一个容器设置为flexbox(又称伸缩容器)很简单,但是却存在一些兼容性的问题,比如在IE10下,

flex布局应用

flex介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div display: flex之后,里面的子元素会按flex布局.常用的册格,各种经典网页布局,如上左右下,还有一些难搞的CSS,如内容不占满整页时,footer会上移,而不是在页面底部等等. 这些情况下使用flex可以轻松简洁的实现.节约大量css篇幅册格 <div class="grids&quo

CSS实例详解：Flex布局

本文由云+社区发表本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题. 一．垂直居中这里同时用非flex布局和flex布局两种方式来实现,可以对比两种实现方式的差异. 1.1用margin实现垂直居中实现方式: 父元素采用相对定位,子元素采用绝对定位,先将元素的定点定位到父元素的中心,再使用margin负值法,即子元素自身宽度.高度的一半,将其拉回到父元素的中心. 实现效果: 附上完整代码: <!DOCTYPE html> <htm

Flex布局-容器的属性

本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活. 一.开始使用任何容器都可以指定为Flex布局. .flexBox{display:flex;} css代码如下: .box{width: 600px;height: 300px;border:1px solid #888;margin-bottom: 10px;} .flexBox{displ

CSS的flex布局和Grid布局

一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex 是一种新型的布局方式,使用该布局方式可以实现几乎所有你想要的效果.但是要注意其浏览器的兼容性,flex 只支持 ie 10+,所有还是要根据你的项目情况使用(没错,我们要

flex布局解说和属性

1. flex-direction 规定当前DIV下面的子元素是横向布局还是纵向布局 row 默认值,横向布局相当于float:left column 纵向,相当于DIV默认的垂直方向 2.justify-conten 主轴居左,居中,居右(这跟flex-direction的对齐方式改变而改变,没有固定的横向和纵向) flex-start 模块居左边 flex-end 模块居右边 center 模块居中(相当于margin:0 auto) space-between 模块两端对齐 3.align

关于基本布局之——Flex布局

Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex,flex布局即创建! 其中,直接设置display:flex或者display:inline-flex的元素称为flex容器,里面的子元素称为flex子项. (flex和inline-flex区别在于,inline-flex容器为inline特性,因此可以和图片文字一行

[续更]一起来撸一下Flex布局里面的那些属性

Flex的全称是Flexible Box,意为弹性布局,用来为盒模型提供最大的灵活性. Flex包含的属性有很多,每个属性又包含了许多不同意义的属性值···然而在实际开发中,能被我们临幸的可能也只是那么几个: { display: flex; justify-content: center|flex-start...; align-items: center|flex-start...; flex-grow: auto...; } 上面是一本正经的分割线! 一.Flex简介任何一个容器都可以通

Flex布局做出自适应页面--语法和案例

本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfault.com/a/1190000012916949/ CSDN地址:http://blog.csdn.net/qq_34648000/article/details/79115294 博客园地址:http://www.cnblogs.com/zhanai/p/8321220.html Flex布局简

学习 Flex 布局

Flex 是 CSS3 推出的一种布局方式,至今有超过十年时间了要实现 Flex 布局很容易,只需要给一个元素的 display 属性设置为 flex 就行 .box { display: flex; } 咋看之下好像没什么变化,那是因为受到影响的其实是其内部的元素,给这个容器内添加几个元素就可以看到效果 <div class="box"> <div class="item-1">1</div> <div class=&q

携程首页--使用flex布局实现

携程首页 flex解决了float和postion的遗留问题,对移动端比较友好. 需要水平排列的元素就为其父元素设置display:flex,并为子元素添加flex的值(比例) 布局时可以先从大的页面着手,搭建出基本的框架 .banner>.nav+.extra+.footer 比如:.nav下面是有很多item,根据观察分为左边部分和右边部分,因此nav就是flex布局;sub和pub的比例就是1:2.. 值得注意的地方就是sub下面的a是使用float进行布局的,因此是两种布局方式结合使用.

轻轻松松学CSS:Flex布局

Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列.对齐和分配空间. 弹性容器(Flex container)通过设置display属性的值为flex,包含多个弹性子元素(Flex item,很多资料把弹性子元素称为"项目") 关于弹性布局的语法,阮一峰老师的博客比较经典,很多其他博客都是转载自此. 关于弹性布局的实例,阮一峰老师的另外一

只需5分钟！一文读懂CSS布局（二） -- flex布局

目录简介基本概念容器属性 1. flex-direction 测试代码 2. flex-wrap 3. flex-flow 4. justify-content 5. align-items 6. align-content 项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-basis 5. flex属性(重点) flex: auto flex: none flex: 1 flex: 100px 6. align-self 在我们上一篇CS

flex布局示例

来自:授权地址作者:水牛01248 几个横排元素在竖直方向上居中 display: flex; flex-direction: row;//横向排列 align-items: center;//垂直方向上居中在母控件的正中:相当于android中的RelativeLayout的centerInParent=true. display: flex; flex-direction: row;//横向排列 justify-content: center;//水平居中 align-items: ce

flex布局简析

最近开始对flex布局进行一个重新的认识. 首先. flex布局适用于所有元素但是注意一点的就是,一旦父级元素设定flex布局的时候,子元素的传统布局属性, float,clear,vertical-align属性都会失效的. 一.父容器的属性 1.flex-direction 是决定元素主轴的方向 row:默认值,由左到右正序. row-reverse:有右到左的逆序 column:有上倒下的正序 column-reserve:由下到上的逆序 2.flex-wrap 是否换行 nowrap:

IE 11 flex布局兼容性问题 ---- 不支持min-height 和flex:1

由于最近项目要嵌入其它平台,所以要做IE11 的兼容,那就用IE11打开网页看一看,一看吓一跳,页脚直接到了页眉的下面,并把主要内容覆盖了,也就是stick footer 布局失效了,我写了一个简易的代码来摸拟这种情况,这是一个vue 的项目,页面的整体布局都放到了app.vue中,页面三个部分构成: 页眉,中间内容,页脚.页眉和页脚都是固定的,中间部分由内容撑开,典型的stick footer 布局.中间部分,左右两列,新建了两个组件,在component 文件夹下.项目目录结构如下 app.

div子元素使用flex布局 自身使用浮动有影响吗

热门专题

div子元素使用flex布局自身使用浮动有影响吗