Ziele Untersuchung
mit Columbo Integrität von
Datenbanken Interaktion und
Portierbarkeit Ergonomie der
Schnittstellen

Angebot Produkte Projekt Beratung

Mittel Analytik Modellierung Sprachen Algebra Logik Hardware Denken Kreativität

Zusammenhänge Gesellschaft Wirtschaft Branche Firma

Benutzer


products/Sources/formale Sprachen/C/Firefox/dom/canvas/ (Firefox Browser Version 136.0.1^©) Datei vom 10.2.2025 mit Größe 2 kB

Quelle grid-item-justify-001-ref.html Sprache: unbekannt

<!DOCTYPE HTML>

<html><head>
  <meta charset="utf-8">
  <title>CSS Grid Test: justify-self (part 1 of 2)</title>
  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213">
  <style type="text/css">
html,body {
    color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
separator { clear:both; display:block; height:6px; }

.grid {
  display: block;
  float: left;
  position: relative;
  border: 1px solid;
  /* border-inline-start: 2px solid lime; */
  border-inline-start: 2px solid black;
  inline-size: 36px;
  block-size: 25px;
  margin-right: 4px;
  background: lightgrey;
}

wrap {
  display: block;
  position: relative;
  inset-inline-start: 1px;
  background: white;
  block-size: 20px;
  inline-size: 32px;
  border-block-start: 3px solid lightgrey;
}

span {
  display: block;
  width: 13px;
  height: 9px;
  background: grey;
  border-block-start: 2px solid blue;
  border-inline-start: 2px solid lime;
  margin: 1px 1px 2px 2px;
  align-self: start;
}

.hl { writing-mode: horizontal-tb; direction:ltr; }
.hr { writing-mode: horizontal-tb; direction:rtl; }
.vl { writing-mode: vertical-lr; }
.vr { writing-mode: vertical-rl; }
.vlr { writing-mode: vertical-lr; direction:rtl; }
.vrl { writing-mode: vertical-rl; direction:ltr; }

.jstart { justify-self:start; }
.jend { justify-self:end; }
.jflexstart { justify-self:flex-start; }
.jflexend { justify-self:flex-end; }
.jselfstart { justify-self:self-start; }
.jselfend { justify-self:self-end; }
.jcenter { justify-self:center; }
.jleft { justify-self:left; }
.jright { justify-self:right; }
.jstretch1 { justify-self:stretch; }
.jstretch2 { justify-self:stretch; width:13px; height:auto; }
.jstretch3 { justify-self:stretch; height:auto; }
.jstretch4 { justify-self:stretch; width:auto; }
.jstretch5 { justify-self:stretch; width:auto; max-width:13px; }
.jstretch6 { justify-self:stretch; height:auto; max-height:9px; }
.jstretch7 { justify-self:stretch; width:auto; height:auto; max-width:13px; max-height:9px; }
.jauto { justify-self:auto; }

.hl .jend, .hl .jflexend, .hl .jright { margin-left: 16px; }
.hr .jend, .hr .jflexend { margin-right: 15px; }
.hl .jcenter { margin-left: 9px; }
.vl .jend, .vl .jflexend { margin-right:3px; }
.hr .jcenter { margin-right: 8px; }
.hr .jleft { margin-right: 15px; }

.hl .jstretch5, .hl .jstretch7, .hr .jstretch5, .hr .jstretch7 { width:14px; }

.jstretch4 { width:27px; }
.vl .jstretch4 { width:0px; }

.vl .jstretch2, .vl .jstretch3 { height:27px; }
.vl .jstretch6, .vl .jstretch7 { height:9px;  }
.vl .jend, .vl .jflexend, .vl .jright { margin-top: 19px; }
.vl .jcenter { margin-top: 10px; }

</style>
</head>
<body>

<script>
var gridwm = [ "hl", "hr", "vl" ]; // grid-item-justify-002.html tests vr/vlr/vrl
var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
var test = [ "start", "end", "flexstart", "flexend", "center", "left", "right",
             "stretch1", "stretch2", "stretch3", "stretch4", "stretch5",
             "stretch6", "stretch7", "auto" ];
for (var i = 0; i < gridwm.length; ++i) {
  for (var j = 0; j < wm.length; ++j) {
    for (var k = 0; k < test.length; ++k) {
      var div = document.createElement("div");
      div.className = "grid " + gridwm[i];
      var wrap = document.createElement("wrap");
      div.appendChild(wrap);
      var span = document.createElement("span");
      span.className = wm[j] + " j" + test[k];
      wrap.appendChild(span);
      document.body.appendChild(div)
    }
    document.body.appendChild(document.createElement("separator"));
  }
}
</script>

</body>
</html>