vux flexbox使用

我在Web开发方面的经验

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

Flexbox解决方案

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

从flex开始

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

如上图所示，该框用灰色虚线表示，我们将应用特定顺序的元素是该框的子元素（A，B，C）。

在定义了谁是“框”和“元素”之后，我们可以开始使用flex，以flex开始，我们将其放入框：

Box {
display :flex;
}

伸缩方向（行）

默认情况下<flex-direction:row>

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

Box {
display :flex;
justify-content :{center,flex-end,flex-start, space-between, space-around }

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

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

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

Box {
display :flex;
align-items :(flex-end, flex-start,center,stretch,baseline)
height: 400px ;
}

伸缩方向（列）

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

Box {
display :flex;
flex-direction :column;
}

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

重要提示： align-items将需要Box的height属性，因此，中间，

为孩子设置权重和顺序

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

• 一个
• 乙
• C

为了使“ B”更大，我们执行以下操作：

Box {
display :flex;
flex-direction :column;
}A {
flex : 1 ;
}B {
flex : 2 ;
}C {
flex : 1 ;
}

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

Box{display :flex;
}
A{
order : 3 ;
}
B{
order : 2 ;}
C{
order : 1 }

结论：Flex-Box是最佳选择。

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

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

vux flexbox使用