vuxflexbox使用_如何使用Flexbox建立专业网站

vux flexbox使用

我在Web开发方面的经验

在与Flex-Box会面之前&＃xff0c;我对CSS在Web开发方面的经验感到沮丧。 计算页面的页边距&＃xff0c;宽度&＃xff0c;对齐方式和高度的经验非常吸引人。 这使我的Web开发经验没有吸引力。 只有在特定属性中精确地输入数值的想法&＃xff0c;网页设计才会变得乏味。

Flexbox解决方案

使用Flex-box属性&＃xff0c;您无需担心计算&＃xff1a;特定的边距&＃xff0c;宽度&＃xff0c;高度。 Flex-box会计算出完美的对齐方式和大小&＃xff0c;以便您的网站看起来完美。 不仅如此&＃xff0c;还可以使您的网站具有响应能力&＃xff0c;没错&＃xff0c;即使您更改网站的大小&＃xff0c;您的网页也应该看起来不错。 这是因为Flex-box将根据浏览器窗口的大小容纳组件。

从flex开始

在进入代码和属性之前。 首先&＃xff0c;我们必须知道Flex-box实际如何工作。 我们必须知道Flex-box的工作原理。 Flex-box这个词说它是一个盒子&＃xff0c;所以我们必须认为我们要修复盒子里面的元素。

如上图所示&＃xff0c;该框用灰色虚线表示&＃xff0c;我们将应用特定顺序的元素是该框的子元素&＃xff08;A&＃xff0c;B&＃xff0c;C&＃xff09;。

在定义了谁是“框”和“元素”之后&＃xff0c;我们可以开始使用flex&＃xff0c;以flex开始&＃xff0c;我们将其放入框&＃xff1a;

伸缩方向&＃xff08;行&＃xff09;

默认情况下

我们可以在flex-direction:row上使用的一些属性flex-direction:row

如果flex-direction在row &＃xff0c;则路线将通过justify-content属性分配到X轴

可以使用align-items属性实现垂直对齐 。 默认情况下&＃xff0c;此属性的值为“ stretch ”。

重要信息 &＃xff1a;我们的盒子必须具有定义的高度属性&＃xff0c;以便证明内容属性可以在Y轴上使用。

伸缩方向&＃xff08;列&＃xff09;

如果需要列视图&＃xff0c;可以通过在flex-direction上使用属性值“ column ”来实现。

现在&＃xff0c;如果使用这种方法&＃xff0c;则需要在X轴周围移动&＃xff0c;并需要align-items &＃xff0c;而在Y轴周围移动&＃xff0c;则需要使用justify-content。

重要提示&＃xff1a; align-items将需要Box的height属性&＃xff0c;因此&＃xff0c;中间&＃xff0c;

为孩子设置权重和顺序

假设我们的Box中有3个Childs&＃xff0c;我们希望中间的孩子比其他2个孩子大。为了实现这一点&＃xff0c;我们必须在b上使用flex属性。 孩子的顺序如下&＃xff1a;

• 一个
• 乙
• C

为了使“ B”更大&＃xff0c;我们执行以下操作&＃xff1a;

对于孩子的顺序&＃xff0c;没有必要在HTML中放入元素的特定顺序。 这可以在CSS上以Flex-box属性调用order

结论&＃xff1a;Flex-Box是最佳选择。

Flexbox最适合在任一行中排列元素&＃xff0c;它将为我们保证&＃xff1a;精度&＃xff0c;时间并节省代码行。 Flex-Box的使用是为了使我们的网页以最少的精力看起来更好。

翻译自: https://hackernoon.com/how-to-build-proffesional-websites-using-flexbox-x03o3yw0

vux flexbox使用