Re: [csswg-drafts] [css-align-3][css-position-3] Better interaction of auto insets and self-alignment properties? (#9124)

Oops, forgot to paste the link -- here's the link to the flex version (using `justify-content` as noted above):
https://jsfiddle.net/dholbert/03n9Lpwu/

```html
<style>
.flex {
  display: flex;
  width: 200px;
  height: 200px;
  position: relative;
  border: 1px solid black;
  justify-content: center;
}

.flex > * {
  align-self: center;
  /* justify-self has no effect on flex items or on abspos flex children: */
  /* justify-self: center; */
  position: absolute;
}
.zero-insets > * {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.small-block {
  height: 30px;
  width: 30px;
  border: 2px solid lime;
}
.paragraph {
  border: 2px solid red;
}
img {
  border: 2px solid cyan;
}
</style>
<div class="flex">
  <div class="paragraph">
    long string of text which will probably have to wrap
  </div>
  <img src="//placekitten.com/40/40">
  <div class="small-block">
    a
  </div>
</div>

<div class="flex zero-insets">
  <div class="paragraph">
    long string of text which will probably have to wrap
  </div>
  <img src="//placekitten.com/40/40">
  <div class="small-block">
    a
  </div>
</div>
```


-- 
GitHub Notification of comment by dholbert
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9124#issuecomment-1663125913 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 3 August 2023 00:20:39 UTC