html - display flex在CSS中的作用是什么

Closed. This question needs to be more focused。它当前不接受答案。












                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。

                        3年前关闭。



我是设计新手，我使用display flex来水平设置div的内容：

<div style="display:flex";>
    <img src="example.png" />
    <div>example...<div/>
</div>

依此类推，图像和div的文本将设置在同一行上，我注意到它的行为类似于display：inline-block（对于父div），向左浮动（对于孩子）。

Flex帮助我水平显示而没有任何浮动，我想知道这是否是flex的角色，我的工作没有错误，或者不会对我的布局产生负面影响，也许是在移动视图中……等等。

最佳答案

我发现该站点对于解释弹性框非常有用：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

display：flex：这定义了一个flex容器；内联或阻止取决于给定的值。它为其所有直接子级启用了弹性上下文。

该网站提供了大量图表说明，有助于您了解Flexbox的各个部分及其功能。

关于html - display flex在CSS中的作用是什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36350838/

上一篇：html - CSS 不适用于 Firefox，Chrome/IE 可以

下一篇：css - 如何显示适合手机屏幕的图像？

相关文章：

java - 在 Android 应用程序中嵌入网页

jquery - 添加 .ressized 到 div id

html - 图片显示不正确

html - 将 flexboxes 缩小到与最短盒子相同的高度

html - 内联 block 在 Firefox/Safari 中比 Chrome 看起来更宽，溢出了行

c# - 多行有多个提交按钮，我应该为每个按钮制作一个表单吗？

javascript - 在屏幕中央显示图像 css jquery

html - css 内联 block 居中内容

html - flexbox 中的 rowspan 或 colspan？

html - 如何制作 :hover also control img background?