红影 发表于 2022-10-18 22:55
嗯嗯，每次看看试试都觉得挺有收获的。
领会要动手
马黑黑 发表于 2022-10-18 18:58
不急不急慢慢来
好的好的。
加林森 发表于 2022-10-18 23:12
好的好的。
身体为重，注意劳逸结合
<style>
#artMain { margin: auto; width: 740px; position: relative; }
#artMain > p, #artMain > pre, #artMain > div { padding: 8px 0; }
#autoFill, #autoFit {
margin: auto;
padding: 10px;
width: 400px;
height: 200px;
position: relative;
overflow: hidden;
resize: horizontal;
display: grid;
grid-template-rows: repeat(auto-fill, 40px);
grid-template-columns: repeat(auto-fill, 40px);
gap: 4px;
}
#autoFit {
grid-template-rows: repeat(auto-fit, 30px);
grid-template-columns: repeat(auto-fit, 30px);
}
#autoFill > span, #autoFit > span {
width: 40px;
height: 40px;
border: 1px solid teal;
display: grid;
place-items: center;
border-radius: 50%;
}
</style>
<div id="artMain">
<h2>第九讲：auto-fill</h2>
<p>auto-fill 属于容器属性的一个方法，用于grid布局下主元素的 grid-template-rows 和 grid-template-columns 两个属性中的 repeat 函数，表达主元素子项目（即子元素）在行和列中的自动填充方式，换言之，如果 grid-template-rows 和 grid-template-columns 属性使用了 auto-fill（并规定了尺寸——必须），则子项目们会根据父元素的宽高自动“调整队伍”。以下示例中，父窗体可以通过拖动右下角改变宽度，试着左右改变父元素的大小，查看其内元素排列的动态变化：</p>
<div id="autoFill" style="border: 1px solid teal;"></div>
<p>上面效果的核心 CSS 代码如下：</p>
<pre>
<span style='color: red;'>#autoFill </span>{
<span style='color: blue;'>margin</span>: auto;
<span style='color: blue;'>padding</span>: 10px;
<span style='color: blue;'>width</span>: 400px;
<span style='color: blue;'>height</span>: 200px;
<span style='color: blue;'>position</span>: relative;
<span style='color: blue;'>overflow</span>: hidden;
<span style='color: blue;'>resize</span>: horizontal;
<span style='color: blue;'>display</span>: grid;
<span style='color: blue;'>grid-template-rows</span>: repeat(auto-fill, 40px);
<span style='color: blue;'>grid-template-columns</span>: repeat(auto-fill, 40px);
<span style='color: blue;'>gap</span>: 4px;
}
<span style='color: red;'>#autoFill > span </span>{
<span style='color: blue;'>width</span>: 40px;
<span style='color: blue;'>height</span>: 40px;
<span style='color: blue;'>border</span>: 1px solid teal;
<span style='color: blue;'>display</span>: grid;
<span style='color: blue;'>place-items</span>: center;
<span style='color: blue;'>border-radius</span>: 50%;
}
</pre>
<p>当我们固定了 grid 子项目的尺寸（比如上例中的 40*40 的 span 标签），但父窗口可能存在尺寸上的不确定性时（比如上例中的宽度可以调整，又如，假若父元素设置了 min-height、内部元素高度总和如果超出 min-height 的值），或者在子项目（子元素）的数量不确定时（例如JS根据需要动态生成子元素的情形），auto-fill 就显示出了它的优越性——它能令子元素像文本流一样自动排列且能自动换行。</p>
<p>grid布局中，相同应用情景下，还有一个 auto-fit 方法，语法和功能都和 auto-fill 极其相似，上例，完全可以使用 auto-fit 取代 auto-fill，根本看不出二者有什么区别（当然，两者实际上是有区别的，这里不谈）。以下示例，使用 auto-fit 代替了 auto-fill，仅将 repeat(auto-fit, 40px) 改为了 repeat(auto-fit, 30px) 以示父元素对行列尺寸的定义有多重要（它会无视子项目定义的尺寸，虽然子项目的尺寸不会被破坏）：</p>
<div id="autoFit" style="border: 1px solid teal;"></div>
<p>小结：本讲介绍了 grid-template-rows/columns 的 repeat 函数会用到的 auto-fill 方法，顺带也把 auto-fit 拉下水。auto-fill 和 auto-fit 方法极其相似，都能令 grid 子项目群根据父元素的尺寸以自动填充（适应）的方式调整排列样式。其语法为：</p>
<pre>
<span style='color: blue;'>grid-template-rows</span>: repeat(auto-fill, 尺寸);
<span style='color: blue;'>grid-template-columns</span>: repeat(auto-fill, 尺寸);
<span style='color: blue;'>grid-template-rows</span>: repeat(auto-fit, 尺寸);
<span style='color: blue;'>grid-template-columns</span>: repeat(auto-fit, 尺寸);
</pre>
</div>
<script>
mkSpans(autoFill);
mkSpans(autoFit);
function mkSpans(father) {
for(j = 0; j < 20; j ++) {
let span = document.createElement('span');
span.innerText = j + 1;
father.appendChild(span);
}
}
</script>
马黑黑 发表于 2022-10-18 23:42
身体为重，注意劳逸结合
嗯嗯。
马黑黑 发表于 2022-10-19 07:49
#artMain { margin: auto; width: 740px; position: relative; }
#artMain > p, #artMain > pre, #artMa ...
这个好，就不用去计算每一行或列各占百分之多少了{:4_173:}
红影 发表于 2022-10-19 14:09
这个好，就不用去计算每一行或列各占百分之多少了
这个有一定的针对性的，不一定每个场景都是这么回事
马黑黑 发表于 2022-10-19 18:16
这个有一定的针对性的，不一定每个场景都是这么回事
这个也可以合并的吧？
红影 发表于 2022-10-19 19:54
这个也可以合并的吧？
这个你要试试看
马黑黑 发表于 2022-10-19 20:28
这个你要试试看
我不知道怎么试啊{:4_173:}
红影 发表于 2022-10-19 21:35
我不知道怎么试啊
不试无法知道
<style>
#papa10 { width: 740px; margin: auto; position: relative; }
#papa10 > p, #papa10 > pre, #papa10 > h2 { margin: 10px 0; }
#papa10button { outline: none; margin-right: 4px; cursor: pointer; }
.grid_papa {
margin: auto;
position: relative;
width: 460px;
height: 300px;
border: 1px solid red;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
}
.grid_papa > div { border: 1px solid green; width: 80px; height: 80px; }
</style>
<div id="papa10">
<h2>第十讲：网格容器规范子项目的对齐方式</h2>
<p>网格容器就是设定了 display: grid; 的元素，它可以主动设定其下网格项目即各子元素的对齐方式。我们以一个四宫格的布局为例加以介绍，先看代码：</p>
<pre>
<style>
<span style='color: red;'>.grid_papa </span>{
<span style='color: blue;'>margin</span>: auto;
<span style='color: blue;'>position</span>: relative;
<span style='color: blue;'>width</span>: 460px;
<span style='color: blue;'>height</span>: 300px;
<span style='color: blue;'>border</span>: 1px solid red;
<span style='color: blue;'>display</span>: grid;
<span style='color: blue;'>grid-template-rows</span>: repeat(2, 1fr);
<span style='color: blue;'>grid-template-columns</span>: repeat(2, 1fr);
}
<span style='color: red;'>.grid_papa > div </span>{ <span style='color: blue;'>border</span>: 1px solid green; <span style='color: blue;'>width</span>: 80px; <span style='color: blue;'>height</span>: 80px; }
</style>
<<span style='color:darkred'>div</span> <span style='color: red'>class</span><span style='color: blue'>=</span><span style='color: magenta'>"grid_papa"</span>>
<<span style='color:darkred'>div</span>>1<<span style='color: darkred'>/div</span>>
<<span style='color:darkred'>div</span>>2<<span style='color: darkred'>/div</span>>
<<span style='color:darkred'>div</span>>3<<span style='color: darkred'>/div</span>>
<<span style='color:darkred'>div</span>>4<<span style='color: darkred'>/div</span>>
<<span style='color: darkred'>/div</span>>
</pre>
<p>运行效果：</p>
<div class="grid_papa">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<p style="text-align: center">
<button>水平靠左</button>
<button>水平居中</button>
<button>水平靠右</button>
<button>垂直靠上</button>
<button>垂直居中</button>
<button>垂直靠下</button>
</p>
<p>当grid子项目拥有自己固定的尺寸（本例80*80）、且尺寸总和不能占满grid容器时，默认情况下如上面效果演示的初始状态那样。示例底部提供了几个按钮，可以点击各个按钮观察各种对齐设定的效果。</p>
<p>grid容器要控制子项目的对齐方式，分别需要两个容器级别的属性：</p>
<p>① justify-items - 水平对齐方式，值有 start（靠左）、center（居中）、end（靠右）</p>
<p>② align-items - 垂直对齐方式，值有 start（靠上）、center（居中）、end（靠下）</p>
<p>justify-items 和 align-items 有一个语法糖表示方法，即简写属性：<span style="color:red;">place-items: 垂直值 水平值;</span>，两个值中间有空格；当垂直和水平两个值一样时只需写一个。请参考下面的语句：</p>
<p>place-items: center; <br><br>这等于：<br><br> place-items : center center;</p>
<p>同时等价于下面两句：<br><br>justify-items: center; <span style="color: green;">/* 水平居中 */</span><br>align-items: center; <span style="color: green;">/* 垂直居中 */</span></p>
<p>place-items 是一个极其有用的对齐子元素的简写属性。很多场合下，即使我们不完全使用 grid 网格布局，假若我们想让里面的子元素绝对居中，当我们定义了父元素 display: grid; 之后，补上一句 place-items: center; 便能办到，无需使用相对复杂的其他实现方式。</p>
</div>
<script>
let alignAr = [
['justify-items','start'],
['justify-items','center'],
['justify-items', 'end'],
['align-items','start'],
['align-items','center'],
['align-items','end'],
];
let btns = document.querySelectorAll('button'), gpapa = document.querySelector('.grid_papa');
btns.forEach((item,key) => {
item.onclick = () => {
gpapa.style.setProperty(alignAr, alignAr);
}
});
</script>
马黑黑 发表于 2022-10-19 22:03
不试无法知道
它本来就是自动占位的，合并没意义{:4_173:}
马黑黑 发表于 2022-10-20 07:58
#papa10 { width: 740px; margin: auto; position: relative; }
#papa10 > p, #papa10 > pre, #papa10 > ...
当垂直和水平两个值一样时只需写一个。怪不得上次看到的end是右下了，看了这个才明白{:4_204:}
红影 发表于 2022-10-20 15:18
当垂直和水平两个值一样时只需写一个。怪不得上次看到的end是右下了，看了这个才明白
这个要自己慢慢领会
红影 发表于 2022-10-20 15:15
它本来就是自动占位的，合并没意义
是的吧
马黑黑 发表于 2022-10-20 18:12
这个要自己慢慢领会
是的，一点点体会，下次可能就记住了。
马黑黑 发表于 2022-10-20 18:12
是的吧
只是看到前面教的合并，顺口就问出来了{:4_173:}
红影 发表于 2022-10-20 21:18
只是看到前面教的合并，顺口就问出来了
也可以的
红影 发表于 2022-10-20 21:18
是的，一点点体会，下次可能就记住了。
不急的