使用 CSS 的 flexbox 布局，不能实现以下哪一个效_阿里巴巴笔试题

一口吃成个胖子

Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

发表于 2018-05-02 14:26:38 回复(0)

梦入神机

lp

发表于 2017-04-20 10:41:48 回复(0)

Mr.Apple

HTML

<h1>不等宽不等高（定宽） </h1>

</div>

<h1>不等宽等高（定宽+变宽）</h1>

<div class="center flex-box">center</div>

<div class="right flex-box">right</div>

</div>

</div>

<h1>等宽不等高（定宽） </h1>

</div>

CSS

.box {

display: -webkit-flex;

display: flex;

flex-direction: row;

flex-wrap:nowrap;

justify-content: flex-start;

align-items: stretch;

align-content: flex-start;

}

.flex-box{

height:200px;

width:500px;

background-color:#ddd;

border:1px solid #fff;

}

.box1 .flex-box{

background-color:#E0BCDB;

}

.box2 .flex-box{

background-color:#E0B6B6;

width:800px;

}

.left{

flex-shrink:0;//空间不足时不允许左侧缩小

}

.box3 .flex-box{

background-color:#ABD9E0;

width:900px;

}

.box4{

flex-wrap: wrap;//空间不足换行

}

.box4 .flex-box{

background-color:#dadada;

}

发表于 2016-07-27 17:57:19 回复(6)

南音

Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。伸缩容器(flex containers)是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

发表于 2015-08-21 16:05:41 回复(3)

方泉水很甜

align-items : stretch可以实现多列布局，每列的高度按内容最高的一列等高

发表于 2016-03-17 22:09:05 回复(1)

天空的遥远

其他几个选项是都能实现，这个瀑布流好像无法实现无缝。

发表于 2015-09-17 21:02:32 回复(2)

Say37

实现无缝瀑布流布局，要用到js获取当前的高度之类的，慕课网上有具体实现

发表于 2017-04-07 13:32:45 回复(1)

hongweizhu_com

我尝试过在微信小程序中使用 flex 实现瀑布流，失败了。结果是每块的高度都是相同的。

瀑布流就像淘宝京东首页商品排列那样，每块高度不相同。

编辑于 2020-12-26 12:54:15 回复(0)

勇敢牛牛不怕困难j

技术点：弹性盒子布局flex，默认值就是自带等高布局的特点。

定义flex布局的时候，有一些默认值。

flex-direction 属性定义主轴的方向。默认值为row，一般是水平显示。flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。

align-item属性定义flex子项在flex容器的当前行的侧轴（纵轴或者说交叉轴）方向上的对齐方式。默认值为stretch，元素被拉伸以适应容器。

发表于 2020-11-23 10:32:51 回复(0)

天来喜欢唱情歌

我觉得D错在瀑布流实现的效果是等宽不等高。

发表于 2015-08-22 20:51:55 回复(0)

Josephine0709

瀑布流指的是图片或div块等宽不等高，参差无缝的排列在一起，在向下滚动滚动条到底的时候，添加新的数据到整体框里面

发表于 2018-08-27 11:11:12 回复(0)

醒醒鱼

不能实现无缝瀑布流布局

发表于 2015-08-29 20:39:30 回复(2)

牛客316955867号

多个宽高不等的元素实现无缝瀑布流布局是较难实现的，主要因为flexbox布局是用来处理一维空间，也就是行或列。如果要实现多列等高的效果，可以通过设置align-items: stretch实现。要实现瀑布流布局，需要元素能够根据父容器的宽度自动换行，并且每一行的高度根据内容自适应，这超出了flexbox布局的能力

发表于 2023-10-26 19:03:38 回复(0)