css3弹性盒布局教程 |css input text居中

弹性盒布局能够适应不同屏幕大小，以及不同设备的排版需要，因此它被用于许多现代网站的设计中。下面大家来学习一下如何使用弹性盒布局。

.container {
display: flex;
flex-direction: row;
align-items: center;
}

上面的代码中，大家使用了display: flex;属性来将容器设置为弹性盒布局。另外，flex-direction: row;表示子元素排列是从左到右的，如果需要从上到下排列，可以设置为flex-direction: column;。

在上面的代码中，大家还使用了align-items: center;属性，将子元素垂直居中对齐。接下来，大家来看一下如何使用flex属性控制子元素的宽度和高度。

.item {
flex: 1;
}

上面的代码中，大家使用了flex: 1;属性，让子元素自动填充父容器的空间，从而实现宽度自适应的效果。

还有一个常用的属性是justify-content，它用来控制子元素在父容器中沿主轴的排列方式，包括flex-start、flex-end、center、space-between和space-around等属性值。

.container {
display: flex;
justify-content: space-between;
}

上面的代码中，大家使用了justify-content: space-between;属性，让子元素在父容器中等间距排列。

弹性盒布局还有很多其他的属性可以控制子元素的排列方式和大小，例如flex-wrap、align-content、order等。通过这些属性的灵活使用，大家可以轻松实现各种不同风格的布局效果。