如何使用 Flexbox 建立专业网站

我在Web开发方面的经验

在遇到Flex-Box之前，我在web开发方面使用CSS的经验令人沮丧。计算页边距、宽度、对齐、高度的经验使网页看起来非常吸引人。这使得我的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

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

如果弯曲方向在行上，则对齐将使用正当性内容属性分布到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轴上移动我们需要对齐项，在y轴上移动我们使用正当性内容；

重要提示： align-items需要一个Box的高度属性，因此空格-between, center，

为孩子设置权重和顺序

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

• A
• B
• 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是为了让我们的web页面看起来更好，而只需要做最少的工作。

原文链接: https://hackernoon.com/how-to-build-proffesional-websites-using-flexbox-x03o3yw0