Fatal编程技术网
  • css/
  • DIV容器的CSS-flex定位

DIV容器的CSS-flex定位

css

DIV容器的CSS-flex定位,css,Css,我可以用这种方法归档所需的位置（参见代码中的注释并尝试不同的宽度值），还是必须使用断点？如果屏幕很小（=672）。但在后一种情况下，我希望有三个屏幕在一的下方居中，在两个屏幕的左侧（如果两个屏幕比一个屏幕高）。经过几个小时的摆弄，我迷路了 .outer{ /*宽度：632px；如果有两次断裂，则全部正确*/ /*宽度：633px；三个不应该在两个的左边，而是保持在居中的下方，就像宽度一样，所以这是我找到的一个解决方案，没有浮动，只是基于flex和媒体查询。我不喜欢的是： 我必须复制三个并使用d

我可以用这种方法归档所需的位置（参见代码中的注释并尝试不同的宽度值），还是必须使用断点？如果屏幕很小（=672）。但在后一种情况下，我希望有三个屏幕在一的下方居中，在两个屏幕的左侧（如果两个屏幕比一个屏幕高）。经过几个小时的摆弄，我迷路了

.outer{
/*宽度：632px；如果有两次断裂，则全部正确*/

/*宽度：633px；三个不应该在两个的左边，而是保持在居中的下方，就像宽度一样，所以这是我找到的一个解决方案，没有浮动，只是基于flex和媒体查询。我不喜欢的是：


  • 我必须复制三个并使用display:none/block
    • 

  • 我不得不利用媒体查询
    • 

  • 我必须手动将媒体查询的断点调整到flex容器的扭曲点
    • 

  • 对于Firefox和Chrome来说，这种调整略有不同。它们不在同一点上包装，因此Firefox中有一个小的中间过渡
    • 

    

    
div{
边框：1px纯黑；
边缘：1米；
填充：1em；
}
.flexclass{
显示器：flex；
柔性包装：包装；
证明内容：中心；
}
.外部{
flex:0自动；
}
.二{
flex:10210px；
}
.三{
显示：块；
文本对齐：居中；
}
.3_1{
显示：无；
}
@仅介质屏幕和（最大宽度：400px）{
.flexclass{
对齐项目：拉伸；
}
.一{
文本对齐：居中；
}
.三{
显示：无；
}
.3_1{
文本对齐：居中；
显示：块；
}
}
形象
按钮
TWO是一个长文本，可以换行并跨越多行。
按钮（复印件）

    您的条件太具体了，您必须使用媒体查询。@ZohirSalak这就是我所说的使用断点的意思。我想知道我是否可以在不使用媒体查询的情况下将其存档，只使用CSS，因为这些宽度不是特定于屏幕的，而是任意的，即从本示例的实际内容宽度派生出来。查看，您可能会找到您需要的内容d在那里。@chriskirknielsen读得不错，谢谢，但并不能完全解决我的问题。如果我是你，我会对所有三个块显式使用flex-grow、flex-shrink和flex-basis。

    <html>

<body>

<style>

div {
    border: 1px solid black;
    margin: 1em;
    padding: 1em;
}
.flexclass {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
}
.outer {
    flex:0 0 auto;
}
.two {
    flex:1 0 210px;
}
.three {
    display:block;
    text-align:center;
}
.three_1 {
    display:none;
}
@media only screen and (max-width: 400px) { 
    .flexclass {
        align-items: stretch;
    }
    .one {
        text-align: center;
    }
    .three {
        display:none;
    }
    .three_1 {
        text-align:center;
        display: block;
    }
}
</style>

<div class="flexclass">
    <div class="outer">
        <div class="one">
            IMAGE
        </div>
        <div class="three">
            BUTTON
        </div>
    </div>
    <div class="two">
        TWO is a long text and may wrap and span many rows.
    </div>
</div>
<div class="three_1">
    BUTTON (copy)
</div>

</body>
</html>