justify-content和align-items之间的区别？ [英] Difference between justify-content vs align-items?

问题描述

我很难理解有什么区别？从我的研究看来， justify-content 可以做到... space-between 和空格，而 align-items 可以做... stretch ， baseline ， initial 和 inherit ？

也看起来像属性共享， flex-start ， flex-end 和 center 。

是否有其他优点它只是偏好？我觉得他们是类似的方式，只是做同样的事情，任何人都知道区别？谢谢！！

解决方案

注意：

的 X 和 Y 轴/对齐方向可以根据使用 flex-direction： row 栏

1。 justify-content：水平

对齐&沿着主轴的间距

flex-start; 对齐儿童 left left

$ b flex-end; 水平对齐 right

$ b

center; 水平对齐

$ b

space-between; 横向均匀分布

space-around; 横向均匀分布儿童

2。 align-items：垂直

仅在辅助轴（Y轴）对齐

$ b flex-start; 垂直对齐儿童 顶部

$ b flex-end; 对齐儿童垂直底部

center; 垂直对齐 居中 （惊讶！）

ba seline; 垂直对齐的 所以他们的基线对齐（实际上不工作）

stretch; 强制儿童成为容器的高度（很适合用于列）

看到它在行动：

http://codepen.io/ enxaneta / full / adLPwv /

我认为：

这些应该被命名为：

flex-x：左边或右边或居中或拉伸或空格或空格

flex-y：向左或向右或居中或伸展

但用html，你永远不会有好东西。从来没有。

I'm having a really hard time understanding what's the difference? From my research it seems like justify-content can do... space-between and space-around, while align-items can do... stretch, baseline, initial and inherit?

Also looks like both properties share, flex-start, flex-end and center.

Is there and dis/advantages to using one over the other or is it just preference? I feel like they are way to similar to just do the same thing anyone know the difference? thanks!!

解决方案

Note:

The X and Y axis / alignment direction can change depending if you are using flex-direction: row or column

1. justify-content: Horizontal

Alignment & Spacing along primary axis (X-axis)

flex-start; Align children horizontally left

flex-end; Align children horizontally right

center; Align children horizontally centered (amaze!)

space-between; Distribute children horizontally evenly across entire width

space-around; Distribute children horizontally evenly across entire width (but with space on the edges

2. align-items: Vertical

Alignment only along secondary axis (Y-axis)

flex-start; Align children vertically top

flex-end; Align children vertically bottom

center; Align children vertically centered (amaze!)

baseline; Aligned children vertically so their baselines align (doesn't really work)

stretch; Force children to be height of container (great for columns)

See it in action:

http://codepen.io/enxaneta/full/adLPwv/

In my opinion:

These should have been named:

flex-x: left or right or center or stretch or space-between or space-around

flex-y: left or right or center or stretch

But with html, you can never have nice things. Never.

这篇关于justify-content和align-items之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！