首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用flex-basis: column,wrap会发生什么?

使用flex-basis: column,wrap会发生以下情况:

  1. flex-basis: column 是一个无效的属性值,正确的属性值应该是 flex-direction: column。flex-direction 属性用于指定 flex 容器中的主轴方向,column 值表示主轴方向为垂直方向。
  2. wrap 是一个无效的属性值,正确的属性值应该是 flex-wrap: wrap。flex-wrap 属性用于指定 flex 容器中的 flex 子项是否换行显示,wrap 值表示子项会自动换行显示。

综上所述,使用 flex-basis: column,wrap 并不会产生任何效果,因为 flex-basis: column 是无效的属性值,而 wrap 是无效的属性值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

10分钟理解CSS3 FlexBox

flex wrap还有一个值:wrap-reverse,设置该值后,被wrap的元素排到其他元素上面: ? 由此可见,flex wrap一定程度上可以取代media query了。 5....如果将one的flex-grow改为2,而two和three改为1,我们看看会发生什么: css: .box{ height: 100px; min-width: 100px; flex-grow:1;...Flex Basis flex-basis用于设置flex item的初始宽/高。为什么有width和height还需要重新加一个flex-basis呢?...有关,当flex-direction为row的时,flex-basis设置的是宽度,当flex-direction为column时,flex-basis设置的是高度; 当flex item被绝对定位后(...当然,这个例子如果换成使用width也是一样的效果,但是虽然效果一样但意义不一样,所以使用flex布局时还是应该尽量遵守规范,选合适的人去干正确的事。 4.

76450

48张小图带你领略Flex 布局之美

flex-direction-column 可以看到,子盒子的布局发生了变化,形成了在Y轴上的布局方式,并且书写方式跟布局一样。 「结论」 flex容器的主轴和块轴相同。...flex-direction-column-reverse 可以看到,子盒子的布局跟column差不多,唯一不同的是,方向上发生了变化。...flex-flow取值 更多取值信息请查看 flex-direction 和 flex-wrap 可以查看MDN上,或者把之前的flex-direction 和 flex-wrap 两者取值看过一遍,那么使用这个属性就没有问题啦...flex-direction:row | row-reverse flex-basis设置的大小为宽度,并且覆盖witdh值 当主轴为纵向时,即?...flex-direction:column | column-reverse flex-basis设置的大小为高度,并且覆盖height值 我们来看看两种情况?

1K10
  • 你们等了很久的弹性布局(flex),还不快来~!

    目前来说,大部分的浏览器也已经得到了兼容,大家可以安全的去使用了。浏览器兼容如下: ?...什么是flex布局 flex布局定义 flex布局能更加轻松地实现复杂网页布局,并且可以在屏幕和浏览器窗口大小发生变化时进行调整以保持元素的相对位置和大小(即响应式操作)。...代码案例如下:属性值使用与效果展示: .wrap { display: flex; flex-direction: row/row-reverse/column/column-reverse...代码案例如下:属性值使用与效果展示: .wrap { display: flex; flex-wrap: wrap/wrap-reverse; width: 300px;...flex-basis属性 flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间大小(main size)。浏览器根据这个属性,计算主轴是否有多余空间。

    1K50

    css3 Flex布局 学习

    column:主轴为垂直方向,起点在上沿 ? column-reverse:主轴为垂直方向,起点在下沿 ?...2. flex-wrap: 决定容器内项目是否可换行 默认情况下,项目都排在主轴线上,使用 flex-wrap 可实现项目的换行。...当主轴为水平方向的时候,当设置了 flex-basis,项目的宽度设置值失效,flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。...当 flex-basis 值为 0 % 时,是把该项目视为零尺寸的,故即使声明该尺寸为 140px,也并没有什么用。...,且子项宽度和不及父容器宽度时,flex-grow 起作用,子项根据 flex-grow 设定的值放大(为0的项不放大) 当 flex-wrapwrap | wrap-reverse,且子项宽度和超过父容器宽度时

    1.5K40

    深入 CSS 中的弹性盒子 Flexible Box

    由于弹性盒子使用了不同的布局算法,某些属性用在弹性容器上没有意义: 多栏布局模块的 column-* 属性对弹性项目无效。 float 与 clear 对弹性项目无效。...第三个值必须为一个有效的宽度值, 并且它会被当作 的值。 取值 initial 元素根据自身宽高设置尺寸。...auto 元素根据自身的宽度与高度来确定尺寸,但是伸长并吸收 flex 容器中额外的自由空间,也缩短自身来适应 flex 容器。...主轴起点与主轴终点和书写模式的前后点相同 column-reverse:表现和column相同,但是置换了主轴起点和主轴终点 ?...cross-start 根据 flex-direction 的值 相当于 start 或 before。 wrap flex 元素 被打断到多个行中。

    1.1K40

    CSS 零基础到实战(05)布局、盒子模型、弹性盒子【前端就业课 第二阶段】

    float 样式的 div,其中一个背景色为绿色,使用 margin-top 表示距离顶部的距离为 10px(此处用于查看接下来的一个知识点),结果如下: 此时我们可以看到,其 div 没有改变其元素类型但依旧显示于一行...此时我再将子元素的宽度设置为 1000,那么该子元素宽度和肯定大于其页面最大宽度: 那如此设置怎样呢?以下是呈现效果: flex-wrap 此时所有子元素将会均分其父元素宽度。...若想使其换行,我们可以使用 flex-wrap 属性,其值为 nowrap 为默认状态,表示不换行,值为 wrap 表示换行。...flex-shrink 与 flex-basis 在 flex 子元素中设置宽度可使用 flex-basls,使用 flex-basls 的优先级比 width 高,即时同时使用 width 以及 flex-basis...|| ]

    78020

    看完这篇,对flex布局还不熟悉,那就来找我(flex布局最全详解)

    什么是flex布局? Flex 是 Flexible Box 的缩写,意为"弹性布局" 在 flex 容器中默认存在两条轴,水平主轴(main axis) 和垂直的交叉轴(cross axis)。...wrap-reverse:换行,第一行在下方。需要注意的是第一排贴容器底部,而不是我们想象的贴容器顶部,效果与wrap相反。 flex-wrap: wrap-reverse ?...3、flex-flow flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性...flex-basis用于设置项目宽度,默认auto时,项目保持默认宽度。 flexflex属性是flex-grow,flex-shrink与flex-basis三个属性的简写。...flex-basis 取值:默认auto,用于设置项目宽度,默认auto时,项目保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重width属性高,因此覆盖widtn

    1.7K30

    前端面试题归类-css的flex相关

    Flex布局常见父项的属性:●flex-direction :设置主轴的方向Row 默认值从左到右row-reverse 从右到左column 从上到下column-reverse 从下到上●justify-content...,再平分剩余空间stretch 设置子项元素高度平分父元素高度●align-items :设置侧轴上的子元素排列方式(单行)该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项(单行)的时候使用...;flex-wrap: wrap;它俩的简写可以写成:flex-flow: column wrap;常见子项的属性:●flex子项目占的份数flex属性定义子项目分配剩余空间,用flex来表示占多少份数...(index是叠罗汉的形式)flex属性flex:1到底是什么?flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。...推荐使用此简写属性,而不是单独写这三个属性。

    73440

    一文吃透 CSS Flex 布局

    .box { flex-direction: row | row-reverse | column | column-reverse; } 属性值 含义 row 默认值,主轴为水平方向(水平布局),...起点在左端,从左向右排列 row-reverse 主轴为水平方向(水平布局),起点在右端,从右向左排列 column 主轴为垂直方向(垂直布局),起点在上沿,从上往下排列 column-reverse...当主轴的长度是固定并且空间不足时,项目尺寸随之进行调整,而不会换行。 flex-wrap: wrap: 换行,第一行在上面 wrap-reverse: 换行,第一行在下方。...当主轴设置为水平时,当设置了flex-basis,设置的项目宽度值失效,flex-basis需要跟flex-grow和flex-shrink配合使用才能生效。...建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器推算相关值。

    58310

    Flex 布局相关用法

    啰嗦那么多,正式开始 一、Flex 是什么,为什么要用? 就 W3C 官方给到的解释是,这是设计来实现更复杂的版面布局。...这能做什么?也就是他能解决什么问题? 2. 能用在哪裡?在哪些地方能用这个方法? 3. 为什么能用?他实现所用到的逻辑是什么? 当然了,这仨问题也直接贯穿在功能实现当中,所以还是来了解使用的方式。...flex-flow: || 比如 column nowrap  和 column wrap-reverse .box {...space-around:伸缩项目平均地分布在行里,每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。...建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器推算相关值。

    1.5K10
    领券