如何对块进行正确的响应视图

时间:2019-01-08 09:31:53

标签: css css3 responsive-design flexbox

将从头开始,我需要创建此页面: http://prntscr.com/m4ddwi

这似乎很容易,但是我收到了一些问题。 我以为可以使用网格,但是继续使用Flexbox

好吧,主要问题是,当我调整窗口大小时-输入和textareas发生了变化,宽度开始有所不同,请问为什么说实话。

现在看起来不错,http://prntscr.com/m4df1k 但是当我开始调整窗口大小时,开始有些混乱:http://prntscr.com/m4df9u

用于输入的CSS和textarea相同-http://prntscr.com/m4dfhb

这是我的HTML:http://prntscr.com/m4dg7j 还有我的scsshttp://prntscr.com/m4dfwh

与块有关的问题,它们的大小调整和保持不变,我仅添加了flex-grow:1,不收缩,所以一切都因内容而改变,但是为什么呢?我该如何预防?

我将所有内容都上传到了github.io,链接:

https://github.com/hordynsky/hordynsky.github.io/tree/master/moderne - code

https://hordynsky.github.io/moderne/pages/order.html - page

很高兴在这里获得任何帮助。 希望没有负面反馈,你们所有人都在努力学习事物……

UPD: 我认为,关于代码,最好在github上看到。 主要文件是: https://github.com/hordynsky/hordynsky.github.io/blob/master/moderne/sass/pages/_order.scss-(此页面的scss) https://github.com/hordynsky/hordynsky.github.io/blob/master/moderne/sass/components/_form.scss-(表单和输入/文本区域本身的scss) https://github.com/hordynsky/hordynsky.github.io/blob/master/moderne/pages/order.html-(我的订单页面)

UPD1:此示例中的主要问题:http://prntscr.com/m4dmet-我添加了具有相同文本的相同块,块的宽度现在为588px。 但是,我需要添加另一个文本,现在添加和表单宽度... 721px-http://prntscr.com/m4dmz7

我只希望它总是一样。 我的表单块和文本块始终为1:1比例。

0 个答案:

没有答案