在前端开发中，CSS 弹性布局（Flexbox）是一项强大的工具，能够让网页布局变得更加灵活和高效。其中，flex 与 justify-content 是弹性布局里极为关键的属性，深入了解它们有助于开发者创建出令人满意的页面布局。

首先来看 flex 属性。它是一个复合属性，是 flex-grow、flex-shrink 和 flex-basis 这三个属性的缩写。flex-grow 定义了元素的放大比例，默认为 0，表示不放大。若所有元素的 flex-grow 都为 1，它们将平均分配剩余空间；若有的元素 flex-grow 设为 2，其他为 1，那么前者获得的剩余空间将是后者的两倍。flex-shrink 定义元素的缩小比例，默认为 1，即如果空间不足，元素将等比例缩小。而 flex-basis 则定义了在分配多余空间之前，元素在主轴上的初始大小。

接着聊聊 justify-content 属性。该属性用于定义元素在主轴上的对齐方式。它有多个取值，常见的有 flex-start、flex-end、center、space-around 和 space-between。flex-start 是默认值，元素会从主轴起点开始排列，这符合常规的布局习惯。flex-end 则相反，元素从主轴终点开始排列。center 能让元素在主轴上居中对齐，这在实现导航栏或模态框等居中效果时非常实用。space-around 会使元素均匀分布在主轴上，且元素之间的间隔相等，两端的间隔是中间间隔的一半。space-between 同样是让元素均匀分布，但两端的元素会紧贴容器边缘，元素之间的间隔相等。

在实际项目中，合理运用 flex 与 justify-content 能够解决许多布局难题。比如，要创建一个水平居中且宽度可自适应的导航栏，可以通过设置父元素 display: flex; justify-content: center; 来实现。再如，制作一个商品展示列表，希望商品均匀分布在容器内，则可以使用 display: flex; justify-content: space-around;。

flex 与 justify-content 是 CSS 弹性布局的核心部分，熟练掌握它们，能够极大地提升前端开发的效率和页面布局的美观性。