flexbox

    1热度

    1回答

    我有两列。 在我的左栏中我有一个p标签。 这个p标签有很多文字,并且在我的专栏之外非常广泛。 当我删除我的p标记列布局看起来很好。 我试过在p标签上设置max-width,但是这不是很好的回应。我希望p标记是col div的100%宽度。 我希望文字的宽度达到100%并很好地包裹。 .wrapper { display: flex; flex: 1 0 auto;

    0热度

    1回答

    我有一个div内的3项。 这个容器需要100%的小部件和水平滚动条。 所以就像一个旋转木马。 .wrapper { display: flex; flex: 1 1 0; overflow-x: scroll; overflow-y: hidden; } .content { display: flex;

    0热度

    1回答

    的线我不太清楚,如果这是可能的CSS,但没有找到那个方向什么,但我会搏一搏: 在(Flex的) - 容器我想要多个(2-3)框/列的文本。每一列都是它自己的文章,它有自己的标题,所以它不是一个文本继续到下一列。 但是,我希望所述列的宽度是灵活的,以便没有列浪费空白空间直到结束。如果一列有空行,它会尝试减小宽度以为自己创建更多换行符并填充该空白,而其他框获得更多宽度以减少文本行数。 在任何情况下,所

    0热度

    2回答

    使用Bootstrap 4,我有一个响应式布局,包含3列,(应该)在不同的屏幕尺寸上更改顺序,宽度和水平对齐。它所有的工作,只是在屏幕大小< 768px的IMGS的水平居中对齐不正常工作。这里是我的代码: .icon-xl-large { width: 80px; } .w-400px { max-width: 400px; } <link hr

    -2热度

    2回答

    我试图做到这一点的设计... 但结果不出我所料,我不是真的清楚如何与柔性尝试此属性和bootstrap,但它们不是我的强项。请解释,解决方案背后的步骤或链接/视频到可以的网站。 .Charlie{ border: solid 1px #333; text-align:center; display: flex; height: 786px; width: 550px;

    0热度

    1回答

    我试图使用Flex箱技术,https://css-tricks.com/couple-takes-sticky-footer/来响应下推页脚在我的网页http://apple.mdsc1.com/test/ 我用: - <style> #wrapper {flex: 1 0 auto;} body, html {height: 100%} body { d

    1热度

    1回答

    我在flex容器中的图像出现问题。当容器/窗口高度减小/调整大小时,我希望它保持比例。 Sample fiddle html, body { height: 100%; } .wrapper { display: flex; width: 100%; height: 60%; border: 1px so

    1热度

    1回答

    获得MD分压器我知道MD-分频器是MD-名单,但我想它在柔性布局 例如: <div layout="row" layout-wrap> <div flex="100"></div> <md-divider></md-divider> <div flex="100"><div> </div> 应该得到horizantal两个div之间的另一种情况 <div lay

    0热度

    3回答

    什么是最简单的方法来选择flexbox容器的所有子元素,并给他们所有相同的余量,例如? 例子: <div class="flexboxcontainer"> <h1>Headline</h1> <p>Some Text</p> <div>Some more text</div> <p class="smalltext">Some small text</p> </div>

    0热度

    1回答

    我试图用Flexbox的做到这一点=> 桌面: | | | block 1 | | block 2 | | | | block 3 | 移动: block 1 block 2 block 3 我来到这个 .cont { display: flex; flex-direction: column; flew-wrap: wrap-reverse;