如何让Html获得Flex中的值_随笔

1，访问页面：a.html：

<html>

<head>

</head>

<body>

<input

type="text"

name="name"

id="name"

<input

type="button"

value="选择用户"

onclick="window.open('b.html','selectname',800,600,1)">

</body>

</html>

2，新打开的选择页面b.html

<html>

<head>

<script

type="text/javascript">

function

selectOrg(name){

if(window.opener){

window.opener.document.all.name.value

=name

window.close()

}

</script>

</head>

<body>

<input

type="radio"

name="name"

onclick="selectOrg('李四')">李四

<input

type="radio"

name="name"

onclick="selectOrg('张三')">张三

<input

type="radio"

name="name"

onclick="selectOrg('王五')">王五

</body>

</html>

试一下吧！

点击a.html中的"选择用户"按钮就会d出b.html,在b.html选择用户后就能返回到a.html并显示返回值

</div>

我没有考虑兼容性问题，自行加上前缀就可以。这里最主要注意两点：

在外层要加上flex-wrap: wrap非常重要，这句话的意思就是可以换行；

内层一定要给其设置宽度。这样才能有效换行，否则全堆在一行里了。

说明：大家在看d性布局这一块，最好按照从上到下一点一点看，因为上下联系比较紧密。

想看我的原文地址，请点击这里。

d性布局基本概念

任何一个容器都可以设置d性布局，一旦容器设置了 d性布局以后，子元素的float、clear和vertical-align属性将失效。

如果设置容器的水平方向为主轴，则垂直方向为交叉轴。

如果设置容器的垂直方向为主轴，则水平方向为交叉轴。

d性布局父类容器常用属性

设置容器为d性布局 display

display：flex 设置块元素为d性布局

display：inline-flex 设置行内元素为d性布局

子元素排列方向 flex-direction

flex-direction : row（默认值）

设置容器的水平方向为主轴，垂直方向为交叉轴，起点在左端，子元素在主轴上从左向右排列。

flex-direction : row-reverse

设置容器水平方向为主轴，垂直方向为交叉轴，起点在右端，子元素在主轴上从右向左排列。

flex-direction : column

设置容器垂直方向为主轴，水平方向为交叉轴，起点在上端，子元素在主轴上从上向下排列。

flex-direction : column-reverse

设置容器垂直方向为主轴，水平方向为交叉轴，起点在下端，子元素在主轴上从下向上排列。

子元素换行方式 flex-wrap

子元素换行是相对于主轴来说的。

flex-wrap ：nowrap（默认）

子元素不换行，当子元素宽度超过父类，会压缩子元素的宽度。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

flex-wrap :nowrap

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

flex-wrap ：wrap

子元素换行，在交叉轴上等距离平分。自己感受换行方式。

flex-wrap ：wrap-reverse

子元素换行，在交叉轴上等距离平分。自己感受换行方式。

在主轴上子元素对齐方式justify-content

justify-content ：flex-start（默认值）

设置子元素子在主轴起点对齐

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

justify-content ：flex-end

设置子元素子在主轴终点对齐

justify-content ：center

设置子元素子在主轴居中对齐

justify-content ：space-between

设置子元素子在主轴两端对齐，子元素之间的间隔都相等。

justify-content ：space-around

设置子元素子在主轴两侧的间隔相等。子元素之间的间隔比子元素与边框的间隔大一倍。

在交叉轴上子元素对齐方式align-items

align-items属性一般在单行使用

align-items：flex-start

设置子元素在交叉轴上起点对齐。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

align-items: flex-start

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

align-items：flex-end

设置子元素在交叉轴上的终点对齐。

align-items：center

设置子元素在交叉轴上居中对齐。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

align-items:center

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

align-items：baseline

设置子元素在交叉轴的第一行文字的基线对齐。

align-items：stretch（默认值）

如果子元素未设置高度或auto，子元素将占满整个容器的高度。

align-content

align-content属性一般在多行使用

align-content：flex-start

设置子元素在交叉轴上起点对齐。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

flex-wrap: wrap

align-content: flex-start

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

align-content：flex-end

设置子元素在交叉轴终点对齐。

align-content：center

设置子元素在交叉轴中点对齐。

align-content：space-between

子元素在交叉轴两端对齐，子元素在交叉轴之间的间隔相等。

align-content：space-around

子元素在交叉轴两侧的间隔相等，子元素之间的间隔比子元素与边框的间隔大一倍。

align-content：stretch（默认值）

如果子元素没有设置高度，子元素占满整个交叉轴。

d性布局子元素常用属性

子元素前后排列顺序order

子元素的 order 属性控制子元素前后排列顺序，默认值为0，order 属性值越小越排在前面。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

flex-wrap: nowrap

}

.boxSelf{

width: 200px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

flex-grow

子元素的 flex-grow属性，设置子元素在主轴剩余份额的占比。

flex-shrink

当空间不够时，设置子元素的缩小比例

设置子元素的大小flex-basis

子元素的 flex-basis属性用来设置子元素在主轴的大小 (水平方向为主轴 flex-basis属性控制的就是宽度，垂直方向为主轴 flex-basis属性控制的就是高度) ，flex-basis属性优先级高于width属性或height属性。

子元素在交叉轴上对齐方式align-self

子元素的align-self属性值和 align-items属性值相同，只不过align-items是设置在父类容器上控制所有子元素在交叉轴的对齐方式，而align-self属性是单独设置在子元素上仅仅控制设置了 align-self属性的元素在交叉轴的对齐方式，align-self属性优先级高于 align-items属性。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7268062.html

如何让Html获得Flex中的值

发表评论

评论列表（0条）