Fatal编程技术网
  • css/
  • HTML5 CSS 3 Flexbox

HTML5 CSS 3 Flexbox

css html

HTML5 CSS 3 Flexbox,css,html,Css,Html,我正在尝试用PHP和Javascript制作一个HTML5和CSS3网页。我想用flexbox显示3行图像。每行应该包含4列 这是我的密码： <div class="row"> <?php echo "<img src='assets/img/termekek/$image.png' class='column' >";?> 但这并没有达到预期的效果 有人能帮我吗？我想您只是缺少一个包含行和列的容器。容器需要有显示：flex和柔性方向 以下是一个

我正在尝试用PHP和Javascript制作一个HTML5和CSS3网页。我想用flexbox显示3行图像。每行应该包含4列

这是我的密码：

<div class="row">
<?php echo "<img   src='assets/img/termekek/$image.png' class='column'   
 >";?>
但这并没有达到预期的效果

有人能帮我吗？

我想您只是缺少一个包含行和列的容器。容器需要有
显示：flex
和
柔性方向

以下是一个例子：


<body>
    <div class="container">
        <div class="row">
            <div class="column">
            </div>
        </div>
        <div class="row">
            <div class="column">
            </div>
        </div>
        <div class="row">
            <div class="column">
            </div>
        </div>
    </div>
</body>


请忽略边框、高度和宽度属性。它们用于更好地显示网页上的元素

上述操作将生成一个包含三行的容器。现在，如果在
中添加三个
，每行将包含四列

还有另一种方法可以获得相同的模式，即在
.row
和
.container
之间交换弹性方向。但是，它将变成一列行，而不是一行列。创建元素时只需考虑一个小细节

顺便说一句，我已经习惯了使用flex，遵循以下指南：。看一看，玩一玩吧


快乐编码！：）
 它以什么方式失败？浏览器显示相互拉伸的图像。我在php标记中使用了一个伪类。我不确定这是否正确。您正在查找flex basis而不是flex

<body>
    <div class="container">
        <div class="row">
            <div class="column">
            </div>
        </div>
        <div class="row">
            <div class="column">
            </div>
        </div>
        <div class="row">
            <div class="column">
            </div>
        </div>
    </div>
</body>



.container {
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100%;
}

.row {
    display: flex;
    flex: 1,
    flex-direction: row;
    border: 1px solid black;
    height: inherit;
    width: inherit;
}

.column {
    flex: 1;
    border: 1px solid orange;
}